/* ============================================================================
   Pension Musterhof, Demo-Seite.
   Eigene Gestaltung. Die Farben des Buchungs-Overlays kommen aus tokens.css
   (Praefix --vr-*), das aus der Villa uebernommen und auf Blau gestellt wurde.
   Hier steht nur, was ausserhalb des Overlays liegt: Kopfbereich,
   Schluesselbrett, Fusszeile.

   Breakpoints: 490, 768, 1040. Keine eigenen erfunden.
   Alle Tippziele mindestens 44x44. Fliesstext nicht unter 17 Pixel.
   ========================================================================= */

:root {
  /* --- Farbe. Nachtblau als Grund, Papierblau als Licht. --------------- */
  --mh-nacht:       #1E4E7D;
  --mh-marine:      #2D6CA8;
  --mh-mittel:      #4A8BC7;
  --mh-licht:       #6FA8D6;
  --mh-eis:         #A8CCE8;
  --mh-papier:      #EEF4FA;
  --mh-weiss:       #FAFCFE;
  --mh-text:        #16222E;
  --mh-text-leise:  #54677C;
  --mh-auf-dunkel:  #E4EEF7;
  --mh-leise-dunkel:#A9BFD4;
  --mh-linie:       #BDD3E6;
  --mh-linie-dunkel:rgba(158,179,200,.22);
  --mh-frei:        #4E9E7A;
  --mh-belegt:      #C98A5E;

  /* --- Schrift --------------------------------------------------------- */
  --mh-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --mh-body:    'Lora', Georgia, 'Times New Roman', serif;
  --mh-sans:    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --mh-t-xs:   0.8125rem;
  --mh-t-sm:   0.9375rem;
  --mh-t-base: 1.0625rem;
  --mh-t-md:   1.1875rem;
  --mh-t-lg:   1.375rem;
  --mh-t-xl:   1.75rem;
  --mh-t-2xl:  2.25rem;
  --mh-hero:   clamp(2.75rem, 8vw, 5.25rem);

  /* --- Abstand, feste Stufen ------------------------------------------- */
  --mh-1: 4px;   --mh-2: 8px;   --mh-3: 12px;  --mh-4: 16px;
  --mh-6: 24px;  --mh-8: 32px;  --mh-12: 48px; --mh-16: 64px;
  --mh-24: 96px; --mh-32: 128px;

  --mh-rund: 3px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mh-papier);
  color: var(--mh-text);
  font-family: var(--mh-body);
  font-size: var(--mh-t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mh-marine); }

/* Sichtbarer Fokus ueberall, nicht nur wo es gerade auffaellt. */
:focus-visible {
  outline: 3px solid var(--mh-mittel);
  outline-offset: 3px;
  border-radius: 2px;
}
.mh-kopf :focus-visible { outline-color: var(--mh-eis); }

/* ============================================================ Demo-Band === */
.mh-band {
  background: var(--mh-mittel);
  color: #FFFFFF;
  font-family: var(--mh-sans);
  font-size: var(--mh-t-sm);
  line-height: 1.5;
  text-align: center;
  padding: var(--mh-3) var(--mh-4);
  letter-spacing: .01em;
}
.mh-band strong { font-weight: 600; }

/* ========================================================== Kopfbereich === */
.mh-kopf {
  position: relative;
  background: var(--mh-nacht);
  color: var(--mh-auf-dunkel);
  overflow: hidden;
  padding: var(--mh-16) var(--mh-6) var(--mh-12);
}

/* Ein sehr leiser Lichtschein hinter dem Schluesselbrett, damit die dunkle
   Flaeche nicht tot wirkt. Kein Verlauf quer ueber die ganze Seite. */
.mh-kopf::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(91,131,172,.22) 0%, rgba(20,34,49,0) 68%);
  pointer-events: none;
}

.mh-kopf__innen {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: var(--mh-12);
  align-items: center;
}

/* --- linke Spalte --- */
.mh-kicker {
  font-family: var(--mh-sans);
  font-size: var(--mh-t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mh-licht);
  margin: 0 0 var(--mh-4);
  display: flex;
  align-items: center;
  gap: var(--mh-3);
}
.mh-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mh-linie-dunkel);
}

.mh-titel {
  font-family: var(--mh-display);
  font-size: var(--mh-hero);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--mh-6);
  color: var(--mh-weiss);
  text-wrap: balance;
}
.mh-titel span {
  display: block;
  color: var(--mh-eis);
}

.mh-lead {
  font-size: var(--mh-t-md);
  line-height: 1.7;
  color: var(--mh-auf-dunkel);
  max-width: 46ch;
  margin: 0 0 var(--mh-8);
}

/* --- Knopfreihe --- */
.mh-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-3);
}

.mh-knopf {
  font-family: var(--mh-sans);
  font-size: var(--mh-t-base);
  font-weight: 600;
  line-height: 1.2;
  min-height: 52px;
  padding: var(--mh-4) var(--mh-8);
  border-radius: var(--mh-rund);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.mh-knopf--haupt {
  background: var(--mh-eis);
  color: var(--mh-nacht);
  border-color: var(--mh-eis);
}
.mh-knopf--haupt:hover { background: var(--mh-weiss); border-color: var(--mh-weiss); }
.mh-knopf--rand {
  background: transparent;
  color: var(--mh-auf-dunkel);
  border-color: rgba(158,179,200,.45);
}
.mh-knopf--rand:hover {
  border-color: var(--mh-eis);
  color: var(--mh-weiss);
  background: rgba(158,179,200,.10);
}

/* ======================================================= Schluesselbrett === */
/* In einer Pension haengt am Empfang ein Brett mit den Zimmerschluesseln.
   Haengt der Schluessel, ist das Zimmer frei. Genau das zeigt diese Tafel,
   und zwar mit echten Zahlen aus dem Admin-Panel. */
.mh-brett {
  background: linear-gradient(180deg, rgba(31,53,76,.92), rgba(20,34,49,.92));
  border: 1px solid var(--mh-linie-dunkel);
  border-radius: var(--mh-rund);
  padding: var(--mh-6);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}

.mh-brett__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-3);
  padding-bottom: var(--mh-4);
  margin-bottom: var(--mh-2);
  border-bottom: 1px solid var(--mh-linie-dunkel);
}
.mh-brett__titel {
  font-family: var(--mh-display);
  font-size: var(--mh-t-lg);
  font-weight: 600;
  margin: 0;
  color: var(--mh-weiss);
}
.mh-brett__datum {
  font-family: var(--mh-sans);
  font-size: var(--mh-t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mh-leise-dunkel);
  white-space: nowrap;
}

.mh-brett__liste { list-style: none; margin: 0; padding: 0; }

.mh-haken {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: var(--mh-4);
  width: 100%;
  min-height: 56px;
  padding: var(--mh-3) var(--mh-2);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mh-linie-dunkel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease;
}
.mh-brett__liste li:last-child .mh-haken { border-bottom: 0; }
.mh-haken:hover { background: rgba(158,179,200,.09); }

.mh-haken__icon { color: var(--mh-frei); display: flex; }
.mh-haken[data-frei="nein"] .mh-haken__icon { color: var(--mh-belegt); }

.mh-haken__name {
  font-family: var(--mh-body);
  font-size: var(--mh-t-base);
  color: var(--mh-weiss);
  line-height: 1.35;
}
.mh-haken__sub {
  display: block;
  font-family: var(--mh-sans);
  font-size: var(--mh-t-xs);
  color: var(--mh-leise-dunkel);
  margin-top: 2px;
}

.mh-haken__stand {
  font-family: var(--mh-sans);
  font-size: var(--mh-t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--mh-frei);
  white-space: nowrap;
}
.mh-haken[data-frei="nein"] .mh-haken__stand { color: var(--mh-belegt); }
.mh-haken__preis {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mh-leise-dunkel);
  margin-top: 2px;
}

.mh-brett__fuss {
  font-family: var(--mh-sans);
  font-size: var(--mh-t-xs);
  color: var(--mh-leise-dunkel);
  margin: var(--mh-4) 0 0;
  padding-top: var(--mh-4);
  border-top: 1px solid var(--mh-linie-dunkel);
  line-height: 1.6;
}

/* =============================================================== Fuss ===== */
.mh-fuss {
  background: var(--mh-weiss);
  border-top: 1px solid var(--mh-linie);
  padding: var(--mh-12) var(--mh-6);
}
.mh-fuss__innen {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: var(--mh-8);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-leise);
}
.mh-fuss h2 {
  font-family: var(--mh-display);
  font-size: var(--mh-t-md);
  font-weight: 600;
  color: var(--mh-text);
  margin: 0 0 var(--mh-2);
}
.mh-fuss p { margin: 0 0 var(--mh-2); }
.mh-fuss a { color: var(--mh-marine); text-decoration: underline; text-underline-offset: 2px; }
/* Tippziele in der Fusszeile gross genug */
.mh-fuss a { display: inline-block; min-height: 24px; padding: 6px 0; }

/* ========================================================= Breakpoints ==== */
@media (min-width: 768px) {
  .mh-kopf { padding: var(--mh-24) var(--mh-8) var(--mh-16); }
  .mh-brett { padding: var(--mh-8); }
  .mh-fuss__innen { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .mh-kopf__innen {
    grid-template-columns: 1.15fr .85fr;
    gap: var(--mh-16);
  }
  .mh-fuss__innen { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 489px) {
  .mh-kopf { padding: var(--mh-12) var(--mh-4) var(--mh-8); }
  .mh-knopf { width: 100%; }
  .mh-brett { padding: var(--mh-4); }
  .mh-haken { grid-template-columns: 26px 1fr; row-gap: var(--mh-1); }
  .mh-haken__stand { grid-column: 2; text-align: left; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
   Nachträge vom 12.09.2026, beide gemessen im Browser bei 375 Pixel Breite,
   nicht vermutet.
   ========================================================================= */

/* 1. Überlauf um 19 Pixel. Ein Rasterkind kann von sich aus nicht schmaler
      werden als sein längster Inhalt (min-width: auto). Das Schlüsselbrett
      mit Familienzimmer Sonnenseite plus Schlüssel hängt drückte die
      Spalte auf 362 Pixel, und ein einspaltiges Raster gibt dieselbe Breite
      an ALLE Kinder weiter. Deshalb liefen Überschrift, Text und Knöpfe
      gleich mit über den Rand. Sichtbar war es nicht, weil overflow:hidden
      es abschneidet, und genau das macht die Messung blind. */
.mh-kopf__innen > * { min-width: 0; }
.mh-haken { min-width: 0; }
.mh-haken__name,
.mh-haken__stand { min-width: 0; overflow-wrap: break-word; }

/* 2. Tippziele in der Fußzeile waren 37 Pixel hoch, Untergrenze ist 44. */
.mh-fuss a {
  min-height: 44px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
}