@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: fallback;
  src: url("/fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/fonts/cardo.woff2") format("woff2");
}

:root {
  --grund: #f9f9f9;
  --weiss: #fff;
  --text: #111;
  --text-2: #636363;
  --schrift: "Inter", sans-serif;
  --schrift-titel: "Cardo", serif;
  --klein: 0.9rem;
  --mittel: 1.05rem;
  --gross: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
  --sehr-gross: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem);
  --riesig: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.283), 3.27rem);
  --abstand-10: 1rem;
  --abstand-20: min(1.5rem, 2vw);
  --abstand-30: min(2.5rem, 3vw);
  --abstand-40: min(4rem, 5vw);
  --abstand-50: min(6.5rem, 8vw);
  --luecke: 1.2rem;
  --inhalt: 620px;
  --breit: 1280px;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--mittel);
  line-height: 1.55;
}

a {
  color: var(--text);
}

a:hover {
  text-decoration: none;
}

:where(body *):focus {
  outline-width: 2px;
  outline-style: solid;
}

h1, h2, h3, h4, .wie-h2 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.2;
}

h1 {
  font-size: var(--riesig);
  line-height: 1.15;
}

h2, .wie-h2 {
  font-size: var(--sehr-gross);
  line-height: 1.2;
}

h3 {
  font-size: var(--gross);
}

h4 {
  font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem);
}

img {
  max-width: 100%;
  height: auto;
}

img.emoji {
  width: 1em;
  height: 1em;
  margin: 0 0.07em;
  vertical-align: -0.1em;
}

.zentriert {
  text-align: center;
}

.sprung {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.sprung:focus {
  top: 5px;
  left: 5px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip-path: none;
  background: #eee;
  color: #444;
  font-size: 1em;
  line-height: normal;
  text-decoration: none;
}

.stapel > * {
  margin-block: 0;
}

.stapel > * + * {
  margin-block-start: var(--luecke);
}

.eng > * + * {
  margin-block-start: var(--abstand-10);
}

.schmal > * {
  max-width: var(--inhalt);
  margin-inline: auto;
}

.sehr-schmal > * {
  max-width: 350px;
  margin-inline: auto;
}

.rand {
  padding-inline: var(--abstand-50);
}

.band {
  padding: var(--abstand-30) var(--abstand-50);
}

.band-weiss {
  background: var(--weiss);
}

.spalten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luecke);
}

.spalten > * {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 782px) {
  .spalten {
    flex-wrap: nowrap;
  }

  .spalten > * {
    flex-basis: 0;
  }
}

.mittig {
  align-self: center;
}

.linie {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--text);
}

.punkte {
  margin: var(--abstand-30) 0;
  border: 0;
  color: var(--text);
  line-height: 1;
  text-align: center;
}

.punkte::before {
  content: "···";
  padding-left: 2em;
  font-family: serif;
  font-size: 1.5em;
  letter-spacing: 2em;
}

.stern::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 3rem;
  margin: 0 auto;
  background: var(--text-2);
  clip-path: path("M11.93.684v8.039l5.633-5.633 1.216 1.23-5.66 5.66h8.04v1.737H13.2l5.701 5.701-1.23 1.23-5.742-5.742V21h-1.737v-8.094l-5.77 5.77-1.23-1.217 5.743-5.742H.842V9.98h8.162l-5.701-5.7 1.23-1.231 5.66 5.66V.684h1.737Z");
}

.hausbild {
  margin: 0;
}

.hausbild a {
  display: inline-block;
}

.hausbild img {

  aspect-ratio: 1024 / 830;
  object-fit: cover;
  border-radius: var(--abstand-20);
  vertical-align: bottom;
}

.galerie {
  --spalt: var(--abstand-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-10) var(--spalt);
}

.galerie figure {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  width: calc(50% - var(--spalt) / 2);
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.galerie:not(.beschnitten) figure {
  margin-bottom: auto;
}

.galerie figure > a {
  flex-grow: 1;
}

.galerie img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;

  aspect-ratio: 1024 / 771;
  object-fit: cover;
}

.beschnitten figure > a {
  display: flex;
}

.beschnitten a,
.beschnitten img {
  flex: 1 0 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zwei-spalten {
  --spalt: var(--luecke);
}

.weite-zeilen {
  row-gap: var(--luecke);
}

@media (min-width: 600px) {
  .drei-spalten figure {
    width: calc(33.33333% - var(--spalt) * 0.66667);
  }

  .vier-spalten figure {
    width: calc(25% - var(--spalt) * 0.75);
  }
}

.preistabelle {
  border-collapse: collapse;
}

.preistabelle td {
  padding: 0.5em;
  border: 1px solid;
}

.klein {
  font-size: var(--klein);
}

.volle-breite {
  width: 100%;
}

.merkmale h3 {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--mittel);
}

.merkmale p {
  margin: var(--luecke) 0 0;
}

.merkmale-weit {
  column-gap: var(--abstand-40);
  row-gap: var(--abstand-30);
}

.schmal > .merkmale-weit {
  max-width: var(--breit);
}

.merkmale-weit h3 {
  font-weight: 600;
}

.merkmale-weit p {
  margin-top: var(--abstand-10);
}

.stapel > .merkmale-weit + .merkmale-weit {
  margin-top: calc(2 * var(--luecke) + var(--abstand-20));
}

.anrufen {
  padding-inline: var(--abstand-50);
}

.anrufen p {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 1.25em 2.375em;
  background: var(--weiss);
  text-align: center;
}

.anrufen-hell {
  padding-block: 50px calc(var(--luecke) + 20px);
  background: var(--weiss);
}

.anrufen-hell p {
  background: var(--grund);
}

.kopf {
  padding: 20px var(--abstand-50);
}

.kopf-abstand {
  margin-bottom: var(--mittel);
}

.seitentitel {
  max-width: var(--breit);
  margin: 0 auto;
  font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.542), 1.2rem);
  font-weight: 600;
}

.seitentitel a {
  text-decoration: none;
}

.hero {
  padding-bottom: calc(var(--abstand-30) + var(--luecke) + 5px);
}

.hero h1 {
  max-width: 565px;
  font-size: var(--sehr-gross);
}

.preise,
.angebot {
  padding-bottom: calc(var(--abstand-30) + var(--luecke) + 30px);
}

.angebot h2 + p {
  margin-top: 1.25rem;
}

.einzelwohnung {
  padding-bottom: calc(var(--abstand-30) + 75px);
}

.stapel > .luft {
  margin-top: calc(2 * var(--luecke) + 5px);
}

.eng > .luft {
  margin-top: calc(2 * var(--abstand-10) + 5px);
}

.abschnitte > :not(hr) {
  margin-top: var(--luecke);
}

.einstieg {
  padding: var(--abstand-30);
  border-radius: 14px;
  background: var(--weiss);
}

.rechtstext {
  margin-top: var(--luecke);
  padding: var(--abstand-50) var(--abstand-50) 0;
}

.rechtstext > * {
  max-width: var(--inhalt);
  margin: var(--luecke) auto 0;
}

.rechtstext > h1 {
  margin-bottom: calc(var(--abstand-30) + var(--luecke));
  text-align: center;
  word-break: break-word;
}

.impressum > h2 {
  margin-top: calc(var(--luecke) + 1.55 * var(--mittel));
}

.impressum {
  padding-bottom: var(--luecke);
}

.fehler {
  margin-block: var(--abstand-50);
  padding-inline: var(--abstand-50);
}

.fehler > * {
  max-width: var(--inhalt);
  margin: var(--abstand-30) auto 0;
}

.fehler > :first-child {
  margin-top: 0;
}

.fuss {
  padding: var(--abstand-50);
}

.fuss-start {
  margin-bottom: var(--luecke);
}

.fuss-einfach,
.fuss-spalten {
  margin-top: var(--luecke);
}

.fuss-zeile {
  display: flex;
  align-items: center;
  gap: var(--luecke);
  max-width: var(--inhalt);
  margin: 0 auto;
}

.unterschrift {
  flex-grow: 1;
  margin: 0;
  color: var(--text-2);
  font-size: var(--klein);
}

.fuss-spalten .fuss-zeile {
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: var(--breit);
}

.fuss-spalten .unterschrift,
.fuss-spalten .fuss-nav {
  flex: 1 1 100%;
  min-width: 0;
}

.fuss-spalten .unterschrift {
  padding-top: var(--luecke);
}

@media (min-width: 782px) {
  .fuss-spalten .fuss-zeile {
    flex-wrap: nowrap;
  }

  .fuss-spalten .unterschrift {
    flex: 0 0 30%;
  }

  .fuss-spalten .fuss-nav {
    flex: 0 0 50%;
  }
}

.fuss-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 500;
}

.fuss-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss-nav a {
  display: block;
  text-decoration: none;
}

.fuss-nav a:hover {
  text-decoration: underline;
}

.menue-knopf {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.menue-knopf svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.menue:popover-open {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem clamp(1rem, var(--abstand-50), 20rem);
  border: 0;
  box-sizing: border-box;
  background: #fff;
  color: var(--text);
  animation: menue-ein 0.1s ease-out forwards;
}

.menue:popover-open ul {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  padding-top: calc(2rem + 24px);
}

.menue-luecke:popover-open ul {
  padding-top: calc(2rem + 24px + var(--luecke));
}

.menue-zu {
  position: absolute;
  top: 1rem;
  right: clamp(1rem, var(--abstand-50), 20rem);
}

html:has(.menue:popover-open) {
  overflow: hidden;
}

@keyframes menue-ein {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menue:popover-open {
    animation: none;
  }
}

@media (min-width: 600px) {
  .menue-auf,
  .menue-zu {
    display: none;
  }

  .menue {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    color: inherit;
  }
}

.bildansicht {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
}

.bildansicht:focus {
  outline: none;
}

.bildansicht::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.bildansicht *,
.bildansicht *::before,
.bildansicht *::after {
  box-sizing: border-box;
}

html:has(.bildansicht[open]) {
  overflow: hidden;
}

.ba-rahmen {
  position: absolute;
  padding: 5px;
  background: #fff;
  box-shadow: 0 0 20px #111;
}

.ba-rahmen img {
  display: block;
  width: 100%;
  height: 100%;
}

.ba-knopf {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.ba-knopf[hidden],
.bewegt .ba-knopf {
  display: none;
}

.ba-knopf span {
  display: block;
  position: relative;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 4px #000;
  transition: transform 0.25s ease-in-out;
}

.ba-zu {
  top: -24px;
  right: -24px;
  z-index: 2;
}

.ba-zu span::before,
.ba-zu span::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 12px;
  height: 2px;
  background: #fff;
}

.ba-zu span::before {
  transform: rotate(45deg);
}

.ba-zu span::after {
  transform: rotate(-45deg);
}

.ba-zurueck,
.ba-weiter {
  top: 50%;
  margin-top: -24px;
}

.ba-zurueck {
  left: -24px;
}

.ba-weiter {
  right: -24px;
}

.ba-zurueck span::after,
.ba-weiter span::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.ba-zurueck span::after {
  left: 7px;
  transform: rotate(-135deg);
}

.ba-weiter span::after {
  right: 7px;
  transform: rotate(45deg);
}

.ba-zu:hover span,
.ba-weiter:hover span {
  transform: rotate(360deg);
}

.ba-zurueck:hover span {
  transform: rotate(-360deg);
}