/* ═══════════════════════════════════════
   MARKEN-CSS: ElbeTräumerei
   Farben/Fonts/Bild-Token + das Ring-Divider-Signature-Element dieser
   Wohnung. Wird von apartment.html zusätzlich zu css/apartment-shared.css
   geladen (siehe fewo_portal/doc/spec.md, "Struktur") - eine künftige
   zweite Wohnung bekommt eine eigene, gleichnamige Datei unter
   apartments/<slug>/<slug>.css mit denselben Custom-Property-Namen.
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   FONTS — self-hosted, siehe /fonts
   Fraunces: weicher, handwerklicher Display-Serif (Balken/Holz-Charakter)
   Archivo:  strukturierte Grotesk (Fachwerk-Raster-Charakter)
═══════════════════════════════════════ */
@font-face {
  font-family: "Fraunces";
  src: url("/apartments/elbetraeumerei/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/apartments/elbetraeumerei/fonts/Fraunces-Italic-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/apartments/elbetraeumerei/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/apartments/elbetraeumerei/fonts/Archivo-Italic-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ═══════════════════════════════════════
   TOKENS
   Farben direkt aus den Fotos des Hauses abgeleitet:
   Dachziegel, Fachwerk-Putz, Eichenbalken, Gartengrün,
   Abendlicht auf der Elbe, schmiedeeisernes Tor.
═══════════════════════════════════════ */
:root {
  --ink: #212b21;
  --ink-soft: rgba(33, 43, 33, 0.68);
  --wall: #f5eee0;
  --wall-deep: #ece0c9;
  --timber: #382a1e;
  --timber-soft: #55402c;
  --roof: #a34925;
  --roof-deep: #7e3417;
  --garden: #445a38;
  --garden-deep: #324128;
  --river: #d89a44;
  --river-deep: #b87d2e;
  --iron: #1d1b16;
  --paper: #fcf8ef;
  --line: rgba(56, 40, 27, 0.16);
  --line-soft: rgba(56, 40, 27, 0.09);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body: "Archivo", "Segoe UI", sans-serif;

  --shadow: 0 10px 30px rgba(29, 27, 22, 0.14);
  --shadow-lift: 0 20px 48px rgba(29, 27, 22, 0.22);
  --radius: 4px;
  --radius-sm: 2px;

  /* Bild-Token, von apartment-shared.css referenziert (siehe dort) - so
     bleibt das Skelett-CSS bildfrei/wohnungsunabhängig. */
  --hero-bg-image: url("/apartments/elbetraeumerei/img/web/n-elbe3-lg.jpg");
  --about-decor-image: url("/apartments/elbetraeumerei/img/decor/botanical-bg.jpg");
  --calendar-booked-stripe: #e2d5b8;
}

/* ═══════════════════════════════════════
   RING-DIVIDER — das wiederkehrende Signature-Element:
   die schmiedeeisernen Ringe von Gartentor, Balkongeländer
   und Gartenbank dieses Hauses, als Trenner zwischen
   Abschnitten wiederverwendet. Gekachelt statt gestreckt,
   damit die Ringe bei jeder Breite rund bleiben.
═══════════════════════════════════════ */
.ring-divider {
  display: block;
  width: 100%;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='17' viewBox='0 0 52 17'%3E%3Ccircle cx='26' cy='8.5' r='4' fill='none' stroke='%23382a1e' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 14%,
    black 86%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 14%,
    black 86%,
    transparent
  );
  opacity: 0.4;
}
.ring-divider--light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='17' viewBox='0 0 52 17'%3E%3Ccircle cx='26' cy='8.5' r='4' fill='none' stroke='%23f5eee0' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.15;
}