/* APART M³ – eigenes Design nach dem Vorbild klassischer englischer
   Landhaus-Hotels: Elfenbein, warmes Gold, feine Linien, Cormorant-Serifen. */

@font-face { font-family: "Cormorant"; src: url("/static/fonts/cormorant-500.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/static/fonts/cormorant-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/static/fonts/cormorant-500-italic.woff2") format("woff2");
             font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --creme: #f5f1e8;          /* Elfenbein */
  --weiss: #fdfbf6;
  --tinte: #33291d;          /* warmes Dunkelbraun */
  --dezent: #8a7d6a;
  --linie: #e3d9c4;
  --gold-hell: #efe6d2;
  --serif: "Cormorant", "Playfair", Georgia, serif;
  --schatten: 0 6px 24px rgba(97, 76, 42, .08);
}

/* Typografie: größer, klassischer, gesperrt */
h1, h2, h3 { font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: .02em; }
h3 { font-size: 1.5rem; }
.kicker { letter-spacing: .38em; font-size: .72rem; }

/* Feine goldene Linien unter Abschnitts-Titeln */
.abschnitt > h2::after {
  content: ""; display: block; width: 64px; height: 1px;
  background: var(--akzent); margin: 1.1rem auto 0;
}
.haus .haus-text h2::after, .unterseite h1::after {
  content: ""; display: block; width: 64px; height: 1px;
  background: var(--akzent); margin: 1.1rem 0 0;
}

/* Hero: gesperrte Versalien wie ein Wappen-Schriftzug */
.hero h1 {
  text-transform: uppercase; letter-spacing: .18em; font-weight: 500;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
}
.hero-slogan { letter-spacing: .06em; }
.hero::after {
  background: linear-gradient(180deg, rgba(40, 30, 15, .38) 0%,
              rgba(40, 30, 15, .08) 45%, rgba(40, 30, 15, .55) 100%);
}

/* Eckige, klassische Flächen mit feinen Rahmen statt runder Karten */
.zimmer-karte, .paket, .merkmal, .kontakt-karte, .route, .service-kasten,
.buchungsrahmen {
  border-radius: 2px; box-shadow: none; border: 1px solid var(--linie);
  background: var(--weiss);
}
.zimmer-bild { border-bottom: 1px solid var(--linie); }
.galerie img, .haus-bild img { border-radius: 2px; box-shadow: var(--schatten); }
.gastgeber-portrait img { border: 3px solid var(--weiss); outline: 1px solid var(--akzent); }
.merkmal-symbol { filter: sepia(.4); }

/* Knöpfe: eckig, gesperrt, goldene Kante – wie die „Book“-Leiste des Vorbilds */
.knopf {
  border-radius: 0; letter-spacing: .22em; padding: .85rem 1.9rem;
  border: 1px solid var(--akzent);
}
.knopf-dunkel { background: var(--akzent); }
.knopf-dunkel:hover { background: var(--tinte); border-color: var(--tinte); }
.knopf-hell { border-color: transparent; }
.knopf-umrandet { border-color: var(--akzent); color: var(--tinte); }
.knopf-umrandet:hover { background: var(--akzent); color: #fff; }

/* Topbar & Footer in Elfenbein/Gold */
body:not(.mit-hero) .topbar, .topbar.fest {
  background: rgba(245, 241, 232, .97); box-shadow: 0 1px 0 var(--akzent);
}
.marke img { border-radius: 2px; }
.nav a:hover { color: var(--akzent); }
.abschnitt-getont { background: var(--gold-hell); }
.fuss { background: var(--tinte); }
.fuss-zeile { border-top-color: rgba(214, 188, 138, .35); font-size: 1.15rem; }

/* Preise in Gold, Tabellenlinien feiner */
.preis { color: var(--akzent); font-size: 1.25rem; }
.paket td { border-top: 1px solid var(--linie); }
.route-daten { color: var(--akzent); }