/* Eingabehinweis im Tisch- und im Zimmerdialog
   ======================================================================
   Sitzung 533a4d5a, 23.09.2026. Auftrag von Dirk.

   Stimmte im Buchungsdialog etwas nicht, erschien bis heute nur ein
   kleiner roter Streifen oben im Formular, 12 Pixel hoch, oft ausserhalb
   des sichtbaren Bereichs. Ab jetzt oeffnet sich stattdessen dieses
   Blatt im Stil des Hauses und sagt in ganzen Saetzen, was fehlt.

   ⚠️ WARUM EINE EIGENE DATEI:
   assets/js/reservation.js traegt die komplette Buchung auf jeder Seite.
   Ein Fehler darin nimmt Erik die Reservierungen. Deshalb wird sie nicht
   angefasst, und deshalb steht auch hier nichts in reservation.css.
   Faellt diese Datei aus, steht wieder genau der rote Streifen da, den
   es vorher gab. Die Buchung laeuft weiter.

   Farben und Schriften kommen aus tokens.css, Praefix --vr-*.
   Keine Aussenverbindung, keine fremde Bibliothek, kein Bild.
   Das Siegel ist ein SVG im Markup, kein Zeichensatzsymbol.
   ====================================================================== */

/* Der rote Streifen wird still gelegt, SOLANGE dieses Blatt die Meldung
   uebernimmt. Die Klasse setzt eingabehinweis.js selbst, und nur nach
   einem geglueckten Aufbau. Kommt das Skript nicht durch, wird sie nie
   gesetzt und der Streifen verhaelt sich wie frueher.
   !important ist noetig: reservation.js setzt display per Stilattribut,
   und ein Stilattribut schlaegt jede gewoehnliche Regel. */
.vr-hinweis-still { display: none !important; }

/* ---------------------------------------------------------------- Blatt */
.vr-hinweis {
  position: fixed;
  inset: 0;
  /* ueber dem Buchungsdialog (9000) und ueber dem Zimmer-Tooltip (99999) */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16 Pixel Seitenluft an jeder Breite, dazu die Sicherheitsraender
     des Geraets. Ohne sie klebt das Blatt am iPhone am Rand. */
  padding: 20px max(16px, env(safe-area-inset-left, 0px))
           20px max(16px, env(safe-area-inset-right, 0px));
  font-family: var(--vr-font-body, 'Lora', Georgia, serif);
  /* Kein backdrop-filter. Auf einer festen Flaeche bricht er das
     Scrollen am Handy, siehe Hausregel. Ein Farbschleier genuegt. */
  background: rgba(26, 20, 16, .62);
  overflow-y: auto;
}
.vr-hinweis[hidden] { display: none; }

.vr-hinweis__karte {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin: auto;
  background: var(--vr-papier, #FBF7EE);
  color: var(--vr-anthrazit, #1A1410);
  border-radius: 10px;
  padding: 30px 30px 26px;
  text-align: center;
  /* Goldene Haarlinie innen, wie am Buchungsdialog */
  box-shadow:
    0 0 0 1px rgba(184, 146, 74, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    0 40px 90px -18px rgba(0, 0, 0, .75),
    0 18px 40px -14px rgba(0, 0, 0, .5);
  animation: vr-hinweis-auf .26s cubic-bezier(.2, .8, .2, 1);
}
/* Ein burgunderner Strich als Kopf des Blattes. */
.vr-hinweis__karte::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg,
    var(--vr-gold, #B8924A) 0%,
    var(--vr-burgund, #6E1A24) 32%,
    var(--vr-burgund, #6E1A24) 68%,
    var(--vr-gold, #B8924A) 100%);
}

/* ⚠️ Kein animation-fill-mode. Ein stehengebliebenes transform eroeffnet
   einen eigenen Bezugsrahmen und kapert position: fixed. Der Endzustand
   der Bewegung ist deshalb genau der Ruhezustand der Regel oben. */
@keyframes vr-hinweis-auf {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* --------------------------------------------------------------- Siegel */
.vr-hinweis__siegel {
  width: 62px;
  height: 62px;
  margin: 2px auto 16px;
  border-radius: 50%;
  background: var(--vr-burgund, #6E1A24);
  box-shadow: 0 0 0 1px rgba(184, 146, 74, .85),
              0 0 0 6px rgba(184, 146, 74, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vr-creme, #F8F2E4);
}
.vr-hinweis__siegel svg { width: 30px; height: 30px; display: block; }

/* ---------------------------------------------------------------- Texte */
.vr-hinweis__eyebrow {
  margin: 0 0 8px;
  font-family: var(--vr-font-body, 'Lora', Georgia, serif);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Gold-tief, nicht Gold: auf Papier misst Gold nur 2,6 zu 1. */
  color: var(--vr-gold-tief, #806022);
  /* Jedes <p> traegt aus base.css eine Lesebreite von 581 Pixeln. Ohne
     die naechsten zwei Zeilen zentriert text-align nur INNERHALB dieses
     schmalen Kastens, und der Kasten klebt links. */
  max-width: none;
  margin-inline: auto;
}
.vr-hinweis__titel {
  margin: 0 0 12px;
  font-family: var(--vr-font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.3rem, 4.4vw, 1.55rem);
  line-height: 1.24;
  font-weight: 600;
  color: var(--vr-burgund, #6E1A24);
  max-width: none;
  margin-inline: auto;
}
.vr-hinweis__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--vr-anthrazit, #1A1410);
  max-width: none;
  margin-inline: auto;
}
.vr-hinweis__fuss {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vr-text-muted, #6B5E50);
  max-width: none;
  margin-inline: auto;
}
.vr-hinweis__fuss:empty { display: none; }

/* Die Zeile mit dem woertlichen Wortlaut, falls eine Meldung auftaucht,
   die dieses Blatt noch nicht kennt. Dann steht sie darunter, damit am
   Telefon niemand raten muss. */
.vr-hinweis__wortlaut {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--vr-linie, #C9B998);
  background: rgba(201, 185, 152, .16);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: var(--vr-text-muted, #6B5E50);
  border-radius: 2px;
  max-width: none;
  margin-inline: auto;
  overflow-wrap: anywhere;
}
.vr-hinweis__wortlaut:empty { display: none; }

/* -------------------------------------------------------------- Knoepfe */
.vr-hinweis__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.vr-hinweis__knopf {
  /* Hausregel der Villa: 44 mal 44 als Untergrenze. Hier 48. */
  min-height: 48px;
  min-width: 44px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--vr-font-body, 'Lora', Georgia, serif);
  font-size: 15.5px;
  letter-spacing: .04em;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vr-hinweis__knopf--haupt {
  background: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
  border-color: var(--vr-burgund, #6E1A24);
}
.vr-hinweis__knopf--haupt:hover,
.vr-hinweis__knopf--haupt:focus-visible {
  background: var(--vr-burgund-tief, #4A0E18);
  border-color: var(--vr-burgund-tief, #4A0E18);
  color: var(--vr-creme, #F8F2E4);
}
.vr-hinweis__knopf--ruhig {
  background: transparent;
  color: var(--vr-burgund, #6E1A24);
  border-color: rgba(110, 26, 36, .38);
}
.vr-hinweis__knopf--ruhig:hover,
.vr-hinweis__knopf--ruhig:focus-visible {
  background: rgba(110, 26, 36, .08);
  border-color: var(--vr-burgund, #6E1A24);
  color: var(--vr-burgund-tief, #4A0E18);
}
.vr-hinweis__knopf[hidden] { display: none; }

/* Sichtbarer Fokus, WCAG 2.2. Der Rahmen liegt aussen, damit er auf
   dem burgunderroten Knopf nicht verschwindet. */
.vr-hinweis__karte :focus-visible {
  outline: 3px solid var(--vr-gold-tief, #806022);
  outline-offset: 3px;
}
.vr-hinweis__karte:focus { outline: none; }

/* ------------------------------------------------- Das gemeinte Feld */
/* Nach dem Schliessen springt der Schreibzeiger in das Feld, um das es
   geht, und das Feld gibt kurz einen goldenen Schein. Nur box-shadow,
   kein transform: siehe die Bemerkung zum Bezugsrahmen oben. */
.vr-hinweis-ziel {
  animation: vr-hinweis-schein 2.2s ease-out 1;
  border-radius: 3px;
}
@keyframes vr-hinweis-schein {
  0%   { box-shadow: 0 0 0 0   rgba(184, 146, 74, .0); }
  12%  { box-shadow: 0 0 0 4px rgba(184, 146, 74, .55); }
  38%  { box-shadow: 0 0 0 4px rgba(184, 146, 74, .55); }
  56%  { box-shadow: 0 0 0 4px rgba(184, 146, 74, .16); }
  74%  { box-shadow: 0 0 0 4px rgba(184, 146, 74, .55); }
  100% { box-shadow: 0 0 0 0   rgba(184, 146, 74, .0); }
}

/* ------------------------------------------------------------- Schmal */
/* Nur die Hausbreiten 490, 768, 1040. Hier reicht die kleinste. */
@media (max-width: 490px) {
  /* align-items bleibt center. Die Karte traegt margin:auto, und genau
     das ist der Schutz gegen den bekannten Flexbox-Fehler: wird die
     Karte hoeher als der Schirm, bleibt ihr oberer Rand erreichbar,
     statt aus dem scrollbaren Bereich herauszuragen. */
  .vr-hinweis { padding: 16px; }
  .vr-hinweis__karte { padding: 26px 20px 22px; border-radius: 8px; }
  .vr-hinweis__siegel { width: 54px; height: 54px; margin-bottom: 14px; }
  .vr-hinweis__siegel svg { width: 26px; height: 26px; }
  .vr-hinweis__text { font-size: 16px; }
  .vr-hinweis__knoepfe { flex-direction: column; gap: 9px; }
  /* Volle Breite, damit das Tippziel nicht schrumpft. */
  .vr-hinweis__knopf { width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------- Ruhiger Modus */
@media (prefers-reduced-motion: reduce) {
  .vr-hinweis__karte { animation: none; }
  .vr-hinweis-ziel { animation: none; box-shadow: 0 0 0 3px rgba(184, 146, 74, .6); }
  .vr-hinweis__knopf { transition: none; }
}