/* Zell Living · Platzhalter. Farben wie Hauptseite: Taubenblau, Eiche. */
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-var.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
}
:root {
  --blau-tief: #4b6478;
  --blau-nacht: #36495a;
  --blau-hell: #c7d3dc;
  --eiche: #c39a68;
  --eiche-hell: #dcb98c;
  --weiss: #fbfcfc;
  --tinte: #1e2a33;
  --schrift: "Jost", "Century Gothic", "Avenir Next", Avenir, system-ui, sans-serif;
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--schrift);
  font-weight: 300;
  color: var(--weiss);
  background: var(--blau-tief);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bühne: Taubenblau, nach unten dunkler, warmes Licht aus der Tür */
.buehne {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--rand);
  background:
    radial-gradient(60vmax 45vmax at 50% 46%, rgba(220, 185, 140, 0.16), transparent 62%),
    linear-gradient(180deg, var(--blau-tief) 0%, var(--blau-tief) 40%, var(--blau-nacht) 100%);
  isolation: isolate;
}
/* feine Senkrechte wie die Wandlinien im Logo */
.buehne::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7.5rem);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}

.kopf, .fuss {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blau-hell);
}
.kopf .status { display: inline-flex; align-items: center; gap: 0.6rem; }
.kopf .status::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eiche-hell);
  box-shadow: 0 0 0 0 rgba(220, 185, 140, 0.6);
  animation: puls 2.8s ease-out infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(220, 185, 140, 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(220, 185, 140, 0); }
}

.mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(0.5rem, 2vh, 2rem);
}

.logo {
  display: block;
  height: clamp(170px, 25vh, 360px);
  width: auto;
  max-width: 78vw;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(20, 30, 40, 0.25));
  animation: oeffnen 1.6s var(--ease-out) both;
}
/* Logo baut sich von unten (Boden) nach oben auf */
@keyframes oeffnen {
  from { clip-path: inset(100% 0 0 0); transform: translateY(12px); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0);    transform: none;             opacity: 1; }
}

.marke {
  margin: clamp(1.25rem, 3vh, 2.25rem) 0 0;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 300;
  animation: auf 1.2s 0.5s var(--ease-out) both;
}
.marke b { font-weight: 500; }

.linie {
  width: clamp(48px, 8vw, 88px);
  height: 1px;
  margin: clamp(1rem, 2.4vh, 1.75rem) auto;
  background: var(--eiche-hell);
  transform-origin: center;
  animation: ziehen 1s 0.9s var(--ease-out) both;
}
@keyframes ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.unterzeile {
  margin: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blau-hell);
  animation: auf 1.2s 0.8s var(--ease-out) both;
}
.ab {
  margin: 0.9rem 0 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eiche-hell);
  animation: auf 1.2s 0.9s var(--ease-out) both;
}
.text {
  max-width: 34rem;
  margin: 1.1rem auto 0;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  color: rgba(251, 252, 252, 0.86);
  text-wrap: balance;
  animation: auf 1.2s 1s var(--ease-out) both;
}

.fakten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  max-width: 44rem;
  margin: 1rem auto 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blau-hell);
  animation: auf 1.2s 1.05s var(--ease-out) both;
}
.fakten li { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; }
.fakten li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--eiche-hell); }
.preis {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: rgba(251, 252, 252, 0.86);
  animation: auf 1.2s 1.1s var(--ease-out) both;
}
.preis b { font-weight: 500; color: var(--weiss); font-size: 1.1em; }
.kontakt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  animation: auf 1.2s 1.15s var(--ease-out) both;
}
.kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(251, 252, 252, 0.35);
  border-radius: 2px;
  color: var(--weiss);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.kontakt a.haupt { background: var(--eiche); border-color: var(--eiche); color: var(--tinte); }
.kontakt svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) {
  .kontakt a:hover { border-color: var(--weiss); background: rgba(251, 252, 252, 0.08); }
  .kontakt a.haupt:hover { background: var(--eiche-hell); border-color: var(--eiche-hell); }
}
.kontakt a:active { transform: scale(0.98); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--eiche-hell); outline-offset: 3px; }

@keyframes auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.fuss { font-size: 0.72rem; align-items: center; }
.fuss nav { display: flex; gap: 1.5rem; }

@media (max-width: 560px) {
  .kopf .ort { display: none; }
  .kopf { justify-content: center; }
  .fuss { flex-direction: column-reverse; gap: 0.25rem; text-align: center; }
  .kontakt a { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Unterseiten Impressum / Datenschutz */
.recht .mitte { justify-content: flex-start; }
.zurueck {
  display: inline-flex; align-items: center; gap: 0.75rem;
  color: var(--weiss); text-decoration: none;
  font-size: 1.15rem; letter-spacing: 0.06em; text-transform: none;
}
.zurueck img { height: 40px; width: auto; }
.zurueck b { font-weight: 500; }
.blatt {
  width: min(44rem, 100%);
  margin: clamp(1.5rem, 4vh, 3rem) auto;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--weiss);
  color: var(--tinte);
  border-radius: 2px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.65;
  box-shadow: 0 24px 60px rgba(20, 30, 40, 0.25);
  animation: auf 0.8s var(--ease-out) both;
}
.blatt h1 { margin: 0 0 0.25rem; font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: 0.02em; }
.blatt .stand { margin: 0 0 1.5rem; font-size: 0.85rem; color: #4f5e69; }
.blatt h2 { margin: 2rem 0 0.4rem; font-weight: 500; font-size: 1.1rem; }
.blatt p, .blatt ul { margin: 0 0 0.75rem; }
.blatt ul { padding-left: 1.2rem; }
.blatt a { color: var(--blau-tief); text-underline-offset: 2px; }
.blatt a:hover { color: var(--tinte); }
.fuss a { color: inherit; text-decoration: none; padding: 0.5rem 0; }
@media (hover: hover) { .fuss a:hover { color: var(--weiss); } }
.fuss a[aria-current="page"] { color: var(--eiche-hell); }
.recht .kopf { align-items: center; }
@media (max-width: 560px) {
  .recht .kopf { justify-content: flex-start; }
  .recht .kopf .status { display: none; }
}