:root{--nav:#0d2936;--nav2:#123d4d;--gold:#d5ad68;--cream:#f7f3e9;--ink:#18313a;--muted:#60747c;--green:#d8eedf;--greenInk:#276343;--busy:#e2e5e6;--white:#fff;--shadow:0 18px 50px rgba(12,39,50,.13)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink)}a{color:inherit}.rahmen{height:100vh;display:grid;grid-template-columns:310px 1fr;overflow:hidden;background:var(--cream)}.navigation{height:100vh;overflow-y:auto;padding:28px 22px;background:linear-gradient(160deg,var(--nav),var(--nav2));color:white}.marke{display:block;text-decoration:none;padding:0 10px 25px}.marke span,.marke strong{display:block}.marke span{font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}.marke strong{font-family:Georgia,serif;font-size:35px;font-weight:500}.marke small{display:block;margin-top:5px;color:#c9d6db}.navigation nav{display:grid;gap:8px}.hauptlink,.unterlinks a{display:block;text-decoration:none;border-radius:10px;transition:.15s}.hauptlink{padding:12px 13px;background:rgba(255,255,255,.08);font-weight:700}.hauptlink:hover,.hauptlink:focus{background:var(--gold);color:#172f39}.wohnungsblock{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:5px}.wohnungsblock .hauptlink{background:rgba(255,255,255,.12)}.unterlinks{display:grid;grid-template-columns:1fr 1.35fr;gap:5px;padding-top:5px}.unterlinks a{padding:9px 7px;text-align:center;font-size:13px;background:rgba(255,255,255,.06)}.unterlinks a:hover{background:rgba(213,173,104,.24)}.hauptframe{width:100%;height:100vh;border:0;background:var(--cream)}
.inhalt{margin:0;background:var(--cream)}.seite{min-height:100vh;padding:clamp(28px,5vw,75px);background:radial-gradient(circle at top right,#fff 0,transparent 40%),var(--cream)}.hero{min-height:calc(100vh - 150px);border-radius:28px;padding:clamp(35px,7vw,90px);display:flex;align-items:center;color:white;background:linear-gradient(90deg,rgba(4,31,43,.9),rgba(4,31,43,.25)),url("bodensee-hero.webp") center/cover;box-shadow:var(--shadow)}.hero-inner{max-width:650px}.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:800;color:#cfa75f}.hero h1,.seite h1{font-family:Georgia,serif;font-weight:500}.hero h1{font-size:clamp(52px,8vw,105px);line-height:.88;margin:20px 0}.hero p{font-size:20px;line-height:1.6}.knopf{display:inline-block;margin-top:15px;padding:13px 18px;border-radius:999px;background:var(--gold);color:#17323c;text-decoration:none;font-weight:800}.kopf{max-width:850px;margin:0 auto 32px}.kopf h1{font-size:clamp(40px,6vw,70px);margin:8px 0 18px}.einleitung{font-size:20px;line-height:1.65;color:var(--muted)}.karte,.wohnungsdaten,.hinweis{max-width:1000px;margin:0 auto;background:white;padding:clamp(24px,4vw,48px);border-radius:22px;box-shadow:var(--shadow)}.wohnungsdaten{display:grid;grid-template-columns:1fr 1.3fr;gap:28px}.foto-platzhalter{min-height:280px;border-radius:16px;background:linear-gradient(135deg,#244e5b,#87a8aa);display:grid;place-items:center;color:white;text-align:center;font-size:24px}.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.fakt{background:#eef3f1;padding:16px;border-radius:12px}.fakt strong,.fakt span{display:block}.fakt strong{font-size:18px}.fakt span{font-size:12px;color:var(--muted);margin-top:4px}.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}.leer{padding:55px 20px;text-align:center;border:2px dashed #b8c5c5;border-radius:16px;color:var(--muted)}address{font-style:normal;line-height:1.7}.rechtstext h2{margin-top:30px}.rechtstext p{line-height:1.7}.warnung{padding:15px;border-left:4px solid var(--gold);background:#fff7e4}
.kalender-kopf{max-width:1200px;margin:0 auto 26px}.jahrwahl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.jahrwahl a{padding:9px 13px;border-radius:9px;background:white;text-decoration:none}.jahrwahl a.aktiv{background:var(--nav);color:white}.legende{display:flex;gap:15px;margin-top:18px;flex-wrap:wrap}.legende span{display:flex;gap:6px;align-items:center}.punkt{width:15px;height:15px;border-radius:4px;background:var(--green)}.punkt.belegt{background:var(--busy)}.jahreskalender{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.monat{background:white;border-radius:15px;padding:15px;box-shadow:0 8px 26px rgba(12,39,50,.08)}.monat h2{font:500 23px Georgia,serif;margin:0 0 11px}.tage{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.tag,.wochentag{font-size:12px;text-align:center;padding:7px 2px;border-radius:5px}.wochentag{font-weight:800;color:var(--muted)}.tag{background:var(--green);color:var(--greenInk)}.tag.belegt{background:var(--busy);color:#68757a;text-decoration:line-through}.tag.leer{visibility:hidden}.preisbox{max-width:1200px;margin:24px auto 0}.admin-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.admin-form label{display:grid;gap:6px;font-weight:700}.admin-form input,.admin-form select{padding:12px;border:1px solid #b6c1c4;border-radius:9px;font:inherit}.admin-form .volle-breite{grid-column:1/-1}.meldung{padding:12px;border-radius:9px;background:#e5f4e8}.fehler{background:#f8dddd}.liste{width:100%;border-collapse:collapse;margin-top:25px}.liste th,.liste td{text-align:left;padding:10px;border-bottom:1px solid #dfe5e4}.loeschen{color:#8c2525;font-weight:700}.login{max-width:500px}
@media(max-width:950px){.rahmen{grid-template-columns:250px 1fr}.navigation{padding:20px 12px}.jahreskalender{grid-template-columns:repeat(2,1fr)}.wohnungsdaten{grid-template-columns:1fr}}
@media(max-width:680px){.rahmen{height:auto;display:block;overflow:auto}.navigation{height:auto;max-height:48vh}.hauptframe{height:100vh}.jahreskalender{grid-template-columns:1fr}.seite{padding:24px 15px}.fakten{grid-template-columns:1fr}.admin-form{grid-template-columns:1fr}.admin-form .volle-breite{grid-column:auto}}
html,
body,
.seite {
  margin: 0 !important;
  padding: 0 !important;
}

.hero {
  min-height: 100vh !important;
  border-radius: 0 28px 28px 0 !important;
  box-shadow: none !important;
}

.galerie img,
.foto-platzhalter,
.seite img {
  border-radius: 0 !important;
 
}
.galerie {
  grid-template-columns: 1fr !important;
} 
.inhalt,
.seite {
  background: #18313a !important;
} 
.karte:has(.galerie) {
  padding: 8px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.galerie {
  gap: 8px !important;
} 
.hauskarte {
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.hauskarte h2,
.hauskarte p,
.kopf h1 {
  color: #ffffff !important;
} 
.hauskarte .galerie {
  max-width: 500px;
  margin: 20px auto;
}

.hauskarte .galerie img {
  width: 100%;
  height: auto;
}

.rosengarten-rahmen,
.rosengarten-rahmen .foto-platzhalter {
  border-radius: 0 !important;
}

.rosengarten-rahmen .foto-platzhalter {
  padding: 0;
  overflow: hidden;
}

.rosengarten-rahmen .foto-platzhalter img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 350px;
  object-fit: cover;
} 
.rosengarten-rahmen .foto-platzhalter {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.rosengarten-rahmen .foto-platzhalter img {
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
} 
.rosengarten-rahmen .foto-platzhalter img + img {
  margin-top: 15px !important;
} 

.preistabelle {
  width: 100%;
  margin: 22px 0;
  border-collapse: collapse;
}

.preistabelle th,
.preistabelle td {
  padding: 12px;
  border: 1px solid #cccccc;
  text-align: left;
  vertical-align: top;
}

.preistabelle th {
  background: #18313a;
  color: white;
}

.preistabelle tbody tr:nth-child(even) {
  background: #f3f3f3;
}

.preisbox details {
  margin: 20px 0;
}

.preisbox summary {
  cursor: pointer;
  font-weight: bold;
} 

.preisbox {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 25px 0 !important;
}

.preisreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 20px 0;
}

.saisonpreis {
  background: #18313a;
  color: white;
  padding: 18px;
  text-align: center;
}

.saisonpreis strong,
.saisonpreis span,
.saisonpreis b,
.saisonpreis small {
  display: block;
}

.saisonpreis strong {
  color: #f2b94b;
  font-size: 18px;
  margin-bottom: 8px;
}

.saisonpreis b {
  font-size: 22px;
  margin-top: 10px;
}

.saisonpreis small {
  margin-top: 4px;
}

@media (max-width: 680px) {
  .preisreihe {
    grid-template-columns: 1fr;
  }
} 
.tag.belegt {
  background: #d93025 !important;
  color: #ffffff !important;
  border-color: #d93025 !important;
} 
.tag.belegt {
  background: #d93025 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Anreise: vormittags frei, danach belegt */

.tag.anreise {
  background: linear-gradient(
    to right,
    #19a44b 0%,
    #19a44b 50%,
    #d93025 50%,
    #d93025 100%
  ) !important;
  color: #ffffff !important;
}

.tag.abreise {
  background: linear-gradient(
    to right,
    #d93025 0%,
    #d93025 50%,
    #19a44b 50%,
    #19a44b 100%
  ) !important;
  color: #ffffff !important;
}


.tag.frei {
  background: #19a44b !important;
  color: #ffffff !important;
}

.legende .punkt:not(.belegt) {
  background: #19a44b !important;
} 
.legende .punkt.belegt {
  background: #d93025 !important;
} 

/* Preisbereich über dem Kalender */

.preisbox {
  max-width: 1200px !important;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 25px auto !important;
}

.preisreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 20px 0;
}

.saisonpreis {
  background: #18313a;
  color: #ffffff;
  padding: 18px;
  text-align: center;
}

.saisonpreis > strong,
.saisonpreis > span {
  display: block;
}

.saisonpreis > strong {
  color: #f2b94b;
  font-size: 18px;
  margin-bottom: 8px;
}

.personenpreise {
  margin-top: 14px;
  display: grid;
  gap: 7px;
}

.personenpreise div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.personenpreise em {
  font-style: normal;
  color: #ffffff;
}

.personenpreise b {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
}

/* Kalenderfarben */

.tag.frei {
  background: #19a44b !important;
  color: #ffffff !important;
}

.tag.belegt {
  background: #d93025 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Anreise: links frei, rechts belegt */

.tag.anreise {
  background: linear-gradient(
    to right,
    #19a44b 0%,
    #19a44b 50%,
    #d93025 50%,
    #d93025 100%
  ) !important;

  color: #ffffff !important;
}

/* Abreise: links belegt, rechts frei */

.tag.abreise {
  background: linear-gradient(
    to right,
    #d93025 0%,
    #d93025 50%,
    #19a44b 50%,
    #19a44b 100%
  ) !important;

  color: #ffffff !important;
}

/* Punkte in der Legende */

.legende .punkt {
  background: #19a44b !important;
}

.legende .punkt.belegt {
  background: #d93025 !important;
}

.legende .punkt.anreise {
  background: linear-gradient(
    to right,
    #19a44b 50%,
    #d93025 50%
  ) !important;
}

.legende .punkt.abreise {
  background: linear-gradient(
    to right,
    #d93025 50%,
    #19a44b 50%
  ) !important;
}

@media (max-width: 680px) {
  .preisreihe {
    grid-template-columns: 1fr;
  }
} 
/* Alle weißen Inhaltsfelder viereckig */

.karte,
.wohnungsdaten,
.hinweis,
.preisbox,
.monat {
  border-radius: 0 !important;
} 
.emobilitaet-bilder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 25px 0;
}

.emobilitaet-bilder img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 680px) {
  .emobilitaet-bilder {
    grid-template-columns: 1fr;
  }
} 
.seeblick-rahmen .foto-platzhalter {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.seeblick-rahmen .foto-platzhalter img {
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.seeblick-rahmen .foto-platzhalter img + img {
  margin-top: 15px !important;
}
.seeblick-rahmen .foto-platzhalter img {
  width: 35% !important;
  max-width: 420px;
  height: auto !important;
  margin: 0 auto !important;
}

.seeblick-rahmen .foto-platzhalter img + img {
  margin: 15px auto 0 auto !important;
}
.seeblick-bilder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.seeblick-bilder img {
  display: block;
  width: 70% !important;
  max-width: 400px !important;
  max-height: 350px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.seeblick-bilder img + img {
  margin-top: 15px !important;
}

.seeblick-bilder img {
  width: 550px !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.seeblick-bilder img + img {
  margin: 15px auto 0 auto !important;
} 
.saentisblick-rahmen {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr !important;
  gap: 28px;
  align-items: start;
}

.saentisblick-bilder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.saentisblick-bilder img {
  display: block;
  width: 380px !important;
  max-width: 90% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
}

.saentisblick-bilder img + img {
  margin-top: 15px !important;
}

@media (max-width: 950px) {
  .saentisblick-rahmen {
    grid-template-columns: 1fr !important;
  }
}

/* Nicht buchbar: grau mit ×. */
.tag.gesperrt,
.legende .punkt.gesperrt {
  background: #737b83 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.tag.gesperrt span { font-weight: 800; }
.legende .punkt.gesperrt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 800;
}