/* ==========================================================================
   Al Melograno - Demo von Meiers Seiten

   Kleines altes Haus in einer Altstadtgasse. Die Gestaltung soll sich
   anfuehlen wie das Haus selbst: Kalkputz, Nussbaum, Terrakotta, nichts
   glaenzt, nichts schwebt.

   Drei Entscheidungen tragen die Seite:
   1. Kein Schatten, nirgends. Bilder haengen stattdessen in einem
      Holzrahmen mit innerer Haarlinie - wie Bilder an einer Wand.
   2. Kein Eckenradius. Alte Haeuser haben Kanten.
   3. Der Grund ist Kalkputz, kein Weiss. Weisse Flaechen gibt es hier nicht.

   Gliederung
   1. Schriften
   2. Token
   3. Grundlagen
   4. Hilfsklassen
   5. Kopf und Navigation
   6. Schaltflaechen und Links
   7. Rahmen und Zierrat
   8. Kopfbild
   9. Abschnitte
  10. Zimmer
  11. Preisrechner
  12. Osteria
  13. Formular
  14. Fuss
  15. Bewegung
   ========================================================================== */

/* --------------------------------------------------- 1. Schriften -------- */
/* Identische woff2-Dateien und Angaben wie von Google ausgeliefert,
   lokal eingebunden - die Seite laedt nichts von fremden Servern.
   Petrona: warme Renaissance-Antiqua, traegt Ueberschriften und Zahlen.
   Cabin:   humanistische Grotesk, ruhig genug fuer Fliesstext.          */

@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../../../fonts/petrona-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../../../fonts/petrona-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../../../../fonts/cabin-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../../../../fonts/cabin-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------- 2. Token ------------ */

:root {
  /* --- 2.1 Primitive ------------------------------------------------------ */
  /* Kalk: der Putz an der Wand - Seitengrund und Flaechen */
  --kalk-50: #fbf3e7;
  --kalk-100: #f3e7d5;
  --kalk-200: #e9d8c0;
  --kalk-300: #d8c1a2;

  /* Nussbaum: Text, Kopf, Fuss, Holzrahmen */
  --nuss-900: #2f2119;
  --nuss-800: #3f2c20;
  --nuss-700: #56392a;
  --nuss-500: #7a5c45; /* Sekundaertext auf hellem Grund, 4.99:1 */
  --nuss-300: #c9b49c; /* Sekundaertext auf dunklem Holz, 7.76:1 */

  /* Granatapfel: der einzige kraeftige Ton, fuer Aktionen und Links */
  --granat-700: #8f2f2b;
  --granat-600: #a63a33;

  /* Terrakotta und Messing: nur Zierrat, nie Text auf hellem Grund */
  --terra-600: #a8552a;
  --messing-500: #d9a441;

  --line: rgba(47, 33, 25, 0.2);
  --line-soft: rgba(47, 33, 25, 0.1);
  --line-light: rgba(251, 243, 231, 0.24);
  --line-light-soft: rgba(251, 243, 231, 0.12);

  /* --- 2.2 Semantisch ----------------------------------------------------- */
  --bg: var(--kalk-100);
  --bg-alt: var(--kalk-200);
  --surface: var(--kalk-50);
  --text: var(--nuss-900);
  --text-muted: var(--nuss-500);
  --accent: var(--granat-700);
  --band: var(--nuss-900); /* das dunkle Holz */
  --border: var(--line);
  --on-dark: var(--kalk-100);
  --on-dark-muted: var(--nuss-300);

  /* --- 2.3 Komponente ----------------------------------------------------- */
  --btn-primary-bg: var(--granat-700);
  --btn-primary-fg: #ffffff;
  /* Der Holzrahmen um die Bilder - die Signatur des Hauses */
  --frame: 10px;
  --frame-color: var(--nuss-700);

  /* --- 2.4 Schriften ------------------------------------------------------ */
  --font-display: 'Petrona', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Cabin', 'Segoe UI', system-ui, sans-serif;

  /* --- 2.5 Raster und Abstaende ------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;

  --container: 1120px;
  --measure: 640px;
  --nav-h: 78px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------- 3. Grundlagen ------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Kalkputz: zwei sehr flache Farbwolken auf dem Grundton. Kostet nichts,
     nimmt der Flaeche aber das Sterile eines glatten Farbwerts.          */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(216, 193, 162, 0.36), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(233, 216, 192, 0.5), transparent 50%);
  background-attachment: fixed;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.008em;
  color: var(--text);
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
}
h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.8rem);
}
h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
}

/* Kleine Beschriftungen laufen in gesperrten Versalien der Antiqua -
   so sehen die gemalten Schilder in der Gasse aus.                     */
h4,
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra-600);
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}

h4 {
  color: var(--text-muted);
}

p {
  margin: 0 0 var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  color: var(--text);
}

a {
  color: inherit;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Muss nach den Layoutregeln greifen: sonst gewinnt ein spaeteres
   display: flex gegen das hidden-Attribut (Zeile im Preisrechner).     */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--granat-700);
  color: #ffffff;
}

/* --------------------------------------------------- 4. Hilfsklassen ----- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--narrow {
  max-width: calc(var(--measure) + var(--space-5) * 2);
}

.measure {
  max-width: var(--measure);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #ffffff;
  padding: 14px 22px;
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.section {
  padding: clamp(64px, 9vw, 124px) 0;
  position: relative;
}
.section--tight {
  padding: clamp(44px, 6vw, 76px) 0;
}
.section--surface {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(34px, 5vw, 60px);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --------------------------------------------------- 5. Kopf ------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nuss-900);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-light-soft);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nav-h);
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-dark);
}

.brand-sub {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--messing-500);
  margin-top: 4px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.main-nav a {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--on-dark-muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.main-nav a:hover {
  color: var(--on-dark);
  border-bottom-color: var(--messing-500);
}

.main-nav a[aria-current='page'] {
  color: var(--on-dark);
  border-bottom-color: var(--messing-500);
}

/* Hoehere Spezifitaet als .btn - sonst blendet das display der Schaltflaeche
   den Knopf auch auf breiten Fenstern wieder ein.                       */
.main-nav .nav-cta-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-light);
  color: var(--on-dark);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  margin: 0 auto;
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: relative;
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 4.5px;
}

.nav-toggle[aria-expanded='true'] span {
  background: transparent;
}
.nav-toggle[aria-expanded='true'] span::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] span::after {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* --------------------------------------------------- 6. Schaltflaechen --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
.btn--primary:hover {
  background: var(--granat-600);
  border-color: var(--granat-600);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover {
  border-color: var(--nuss-700);
  background: rgba(47, 33, 25, 0.05);
}

/* Auf dunklem Grund - als Klasse am Knopf selbst oder am Elternelement */
.btn--ghost.on-dark,
.on-dark .btn--ghost {
  color: var(--on-dark);
  border-color: var(--line-light);
}
.btn--ghost.on-dark:hover,
.on-dark .btn--ghost:hover {
  border-color: var(--messing-500);
  background: rgba(251, 243, 231, 0.08);
}

/* Textlink mit Pfeil. Der Strich darunter ist der gemalte Unterstrich
   aus der Gasse, deshalb Terrakotta und nicht die Textfarbe.           */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 2px solid var(--terra-600);
  padding-bottom: 3px;
  transition: gap 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link:hover {
  gap: 16px;
  border-bottom-color: var(--granat-700);
}
.link svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* --------------------------------------------------- 7. Rahmen ----------- */
/* Die Signatur: Bilder haengen in einem Holzrahmen mit innerer Haarlinie.
   Kein Schatten - das Bild liegt an der Wand, es schwebt nicht.        */

.frame {
  margin: 0;
  position: relative;
  border: var(--frame) solid var(--frame-color);
  background: var(--frame-color);
}

.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(251, 243, 231, 0.32);
  pointer-events: none;
}

.frame img {
  width: 100%;
}

.frame figcaption {
  background: var(--frame-color);
  color: var(--kalk-200);
  font-size: 0.82rem;
  text-align: center;
  padding: 10px var(--space-3) 2px;
}

.frame--slim {
  --frame: 6px;
}

/* Das Trennzeichen zwischen den Abschnitten: eine Haarlinie, in der Mitte
   unterbrochen von einem kleinen Granatapfel.                           */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 auto;
  max-width: 320px;
  color: var(--terra-600);
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.divider svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* --------------------------------------------------- 8. Kopfbild --------- */

.hero {
  position: relative;
  background: var(--nuss-900);
}

.hero-media {
  margin: 0;
  position: relative;
}

.hero-media img {
  width: 100%;
  height: clamp(420px, 74vh, 720px);
  object-fit: cover;
  /* Das Bild etwas waermer und ruhiger, damit die Schrift darauf steht */
  filter: saturate(1.04) brightness(0.94);
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(47, 33, 25, 0.34) 0%,
    rgba(47, 33, 25, 0.12) 40%,
    rgba(47, 33, 25, 0.4) 100%
  );
}

/* Der eigentliche Abdunkler haengt am Textblock, nicht an einer festen
   Prozentmarke des Bildes. Sonst entscheidet der Zufall des Bildausschnitts
   ueber die Lesbarkeit: die Gasse ist im oberen Drittel sonnenbeschienen,
   und dort stand die Ortsangabe bisher praktisch unsichtbar. So traegt der
   Verlauf immer genau so weit, wie der Text reicht - auch wenn er laenger
   wird oder ein anderes Bild eingesetzt wird.                           */
.hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: clamp(56px, 12vw, 120px);
  padding-bottom: clamp(32px, 5vw, 60px);
  color: var(--on-dark);
}

.hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(47, 33, 25, 0.9) 0%,
    rgba(47, 33, 25, 0.82) 42%,
    rgba(47, 33, 25, 0.58) 72%,
    rgba(47, 33, 25, 0) 100%
  );
}

.hero-inner > .container {
  position: relative;
  z-index: 1;
}

.hero-inner h1 {
  color: var(--on-dark);
  max-width: 15ch;
}

.hero-inner .eyebrow {
  color: var(--messing-500);
}

.hero-inner .lead {
  color: var(--on-dark-muted);
  max-width: 46ch;
}

/* Die harten Angaben direkt unter dem Bild. Bewusst keine Kachelreihe,
   sondern eine gesetzte Zeile: Label und Wert stehen nebeneinander, die
   Raute trennt die Angaben wie in einem alten Prospekt. Weil sie hinter
   der Angabe steht (nicht davor), sieht auch ein Umbruch richtig aus.  */
.hero-line-wrap {
  background: var(--nuss-800);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-light-soft);
}

/* Schmal: jede Angabe auf eine eigene Zeile. Ein Umbruch mitten in der
   Aufzaehlung sieht sonst zufaellig aus - mal zwei Angaben pro Zeile,
   mal eine. Die Rauten braucht es dann auch nicht.                    */
.hero-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) 0;
}

.hero-line > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.hero-line dt {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--messing-500);
}

.hero-line dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Kopf der Unterseiten: kein Bild, nur Putz und ein Rahmenstrich */
.page-head {
  padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--line-soft);
}

.page-head h1 {
  max-width: 18ch;
}

.page-head .lead {
  max-width: var(--measure);
  color: var(--text-muted);
}

/* --------------------------------------------------- 9. Abschnitte ------- */

/* Das dunkle Holzband - der Ruhepunkt der Seite */
.band {
  background: var(--band);
  color: var(--on-dark);
}
.band h2,
.band h3 {
  color: var(--on-dark);
}
.band .eyebrow {
  color: var(--messing-500);
}
.band p {
  color: var(--on-dark-muted);
}
.band .link {
  color: var(--messing-500);
  border-bottom-color: rgba(217, 164, 65, 0.5);
}
.band .link:hover {
  border-bottom-color: var(--messing-500);
}
.band .frame {
  --frame-color: var(--nuss-700);
}

/* Die Faktenspalten erben sonst die dunklen Textfarben und stehen dann
   unlesbar auf dem Holz.                                               */
.band .facts,
.band .fact {
  border-color: var(--line-light-soft);
}
.band .fact h4 {
  color: var(--messing-500);
}
.band .fact strong {
  color: var(--on-dark);
}
.band .fact p {
  color: var(--on-dark-muted);
}

/* Zitat */
.quote {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.quote blockquote {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-style: italic;
  line-height: 1.4;
}

.quote cite {
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Drei Hochformate nebeneinander */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.tiles .frame img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Harte Angaben in Spalten */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.fact {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-bottom: 4px;
}

.fact p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Dieselben Angaben auf der Startseite, aber untereinander: Stichwort links,
   Antwort rechts, dazwischen nur eine Haarlinie. Die Spaltenfassung oben
   bleibt den Unterseiten vorbehalten - so hat die Startseite hier einen
   anderen Takt und liest sich wie eine Hausordnung, nicht wie ein Raster. */
.notes {
  max-width: 860px;
  border-top: 1px solid var(--line);
}

.note {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.note h4 {
  margin: 0;
}

.note-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.note-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Aufforderung am Seitenende */
.cta-band {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(32px, 5vw, 60px);
  text-align: center;
}

.cta-band p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
}

.cta-band .btn-row {
  justify-content: center;
}

/* --------------------------------------------------- 10. Zimmer ---------- */

.rooms {
  display: grid;
  gap: var(--space-5);
}

.room {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.room:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.room-figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Das Emailleschild mit der Zimmernummer - haengt neben der Tuer */
.room-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.room-no {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nuss-900);
  color: var(--kalk-100);
  border: 2px solid var(--nuss-900);
  box-shadow: inset 0 0 0 2px var(--kalk-100);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.room-head h3 {
  margin: 0;
}

.room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.room-tags li {
  font-size: 0.82rem;
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 3px 10px;
}

.room-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.room-price .amount {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.room-price .unit {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.room-price .btn {
  margin-left: auto;
}

/* Zeile ohne Bild (die Jahreszeiten auf der Dorfseite). Ohne das hier
   bleibt die 300-px-Bildspalte leer stehen und der Text quetscht sich
   hinein.                                                              */
.room--plain .room-price .unit {
  margin-left: auto;
}

/* --------------------------------------------------- 11. Preisrechner ---- */
/* Auf der Zimmerseite: Zimmer, Naechte und Personen waehlen, der Preis
   steht sofort da. Rechnet nur im Browser, verschickt nichts.          */

.rechner {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 40px);
}

.rechner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.rechner label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.rechner select,
.rechner input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--kalk-50);
  border: 1px solid var(--border);
  border-radius: 0;
}

.rechner-out {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.rechner-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.rechner-zeile span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.rechner-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.rechner-summe dt {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.rechner-summe dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--granat-700);
}

.rechner-hinweis {
  margin-top: var(--space-3);
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* --------------------------------------------------- 12. Osteria --------- */

.karte {
  display: grid;
  gap: var(--space-5);
}

.karte-gang h3 {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}

.gericht {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.gericht-name {
  font-weight: 600;
}

/* Die Punktreihe zwischen Gericht und Preis - wie auf einer alten Karte */
.gericht-fuell {
  flex: 1;
  border-bottom: 1px dotted var(--kalk-300);
  transform: translateY(-4px);
}

.gericht-preis {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gericht-sub {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* --------------------------------------------------- 13. Formular -------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.field .req {
  color: var(--granat-700);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--kalk-50);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.2s var(--ease);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--nuss-700);
}

.field .hint {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field .error {
  display: none;
  margin: var(--space-2) 0 0;
  font-size: 0.87rem;
  color: var(--granat-700);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--granat-700);
}

.field.has-error .error,
.consent-field.has-error .error {
  display: block;
}

.consent-field {
  grid-column: 1 / -1;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.92rem;
  color: var(--text-muted);
  cursor: pointer;
}

.consent input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  accent-color: var(--granat-700);
}

/* Der umlaufende Rahmen ist die Sprache dieses Hauses - Bilder haengen hier
   im Rahmen, nichts bekommt einen angesetzten Balken. Der einzelne dicke
   Strich links war der einzige im ganzen Stylesheet.                     */
.form-success {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--kalk-50);
  border: 1px solid var(--granat-700);
}

.form-success.is-visible {
  display: block;
}

.form-success p {
  margin: 0;
}

/* Kontaktangaben neben dem Formular */
.kontakt-block {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.kontakt-block:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.kontakt-block a {
  color: var(--accent);
}

.zeiten {
  display: grid;
  gap: 6px;
}

.zeiten > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.95rem;
}

.zeiten span:first-child {
  color: var(--text-muted);
}

.zeiten span:last-child {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- 14. Fuss ------------ */

.site-footer {
  background: var(--nuss-900);
  color: var(--on-dark);
  padding: clamp(52px, 7vw, 84px) 0 var(--space-5);
}

.site-footer h4 {
  color: var(--messing-500);
}

.site-footer a {
  color: var(--on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover {
  color: var(--on-dark);
  border-bottom-color: var(--messing-500);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-light-soft);
}

.footer-grid p {
  color: var(--on-dark-muted);
  font-size: 0.95rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
}

.footer-links {
  display: grid;
  gap: var(--space-2);
  font-size: 0.95rem;
}

.footer-hours {
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.footer-hours > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.footer-hours span:last-child {
  font-variant-numeric: tabular-nums;
}

.demo-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding: var(--space-4) 0;
  font-size: 0.84rem;
  color: var(--on-dark-muted);
  border-bottom: 1px solid var(--line-light-soft);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding-top: var(--space-4);
  font-size: 0.84rem;
  color: var(--on-dark-muted);
}

.footer-bottom p {
  margin: 0;
}

/* --------------------------------------------------- 15. Bewegung -------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------- Tippflaechen -------- */
/* Am Telefon ist die Telefonnummer das, was tatsaechlich angetippt wird. Als
   reine Textzeile war sie 21px hoch. inline-flex statt Innenabstand, damit
   die Unterstreichung weiter am Text klebt und nicht am Kasten.           */
@media (pointer: coarse) {
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------- Ab 620 px ----------- */

@media (min-width: 620px) {
  /* Breit genug: die Angaben laufen als eine gesetzte Zeile, Rauten dazwischen */
  .hero-line {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: var(--space-3);
  }
  .hero-line > div:not(:last-child)::after {
    content: '\25C6';
    margin-left: var(--space-3);
    font-size: 0.5rem;
    color: var(--terra-600);
    transform: translateY(-0.2em);
  }

  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rechner-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .facts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  /* Stichwort und Antwort nebeneinander - die Liste bleibt einspaltig */
  .note {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: baseline;
  }
}

/* --------------------------------------------------- Ab 900 px ----------- */

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split-figure {
    order: -1;
  }

  .room {
    grid-template-columns: 300px 1fr;
    column-gap: var(--space-5);
    align-items: start;
  }

  .room--plain {
    grid-template-columns: 1fr;
  }

  .room-figure {
    grid-row: span 2;
  }

  .karte {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .kontakt-split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }

  /* Ab hier steht der Text nur noch in der linken Haelfte, also darf der
     Abdunkler auch nur dort liegen. Sonst deckt er die sonnenbeschienene
     Gasse gleich mit zu - und die ist der Grund, warum das Bild hier steht.
     Die Maske blendet den Verlauf zur Oberkante hin aus, damit die Kante des
     Textblocks nicht als Streifen im Bild sichtbar wird.                  */
  .hero-inner::before {
    background: linear-gradient(
      to right,
      rgba(47, 33, 25, 0.93) 0%,
      rgba(47, 33, 25, 0.86) 34%,
      rgba(47, 33, 25, 0.42) 62%,
      rgba(47, 33, 25, 0) 84%
    );
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
    mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  }
}

/* --------------------------------------------------- Bis 899 px ---------- */

@media (max-width: 899px) {
  .nav-toggle {
    display: block;
  }

  .nav-cta {
    display: none;
  }

  .main-nav .nav-cta-mobile {
    display: inline-flex;
    margin-top: var(--space-2);
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--space-4);
    background: var(--nuss-900);
    border-bottom: 1px solid var(--line-light-soft);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s var(--ease), padding 0.3s var(--ease),
      visibility 0.3s;
  }

  .main-nav.is-open {
    max-height: 70vh;
    overflow-y: auto;
    visibility: visible;
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .main-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-light-soft);
  }

  .main-nav a:last-of-type {
    border-bottom: 0;
  }

  .main-nav .btn {
    border-bottom: 0;
  }
}