/* Urlaubshinweis der Villa Restaurant Soemmerda
   Angelegt 09.09.2026, Sitzung 0e1164b4.

   Liegt bewusst NICHT unter assets/css/. Dort haelt die fremde Sperre
   villa-design-cbbfbc04 den ganzen Ordner.

   Mobil zuerst, Erik prueft mit dem Handy. Rundum Luft, auch oben und
   unten. Alle Tippziele mindestens 44 mal 44 (Villa-Hausregel 08.09.).
   Breakpoints nur 490, 768, 1040. */

.vu-vorhang {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 26px 20px;
  background: rgba(16, 11, 9, .62);
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  animation: vu-auf .3s ease both;
}
/* Die Seite dahinter wird unscharf. Der Vorhang sperrt das Scrollen
   ohnehin, deshalb kostet der Weichzeichner hier keine Bildrate.
   Kann der Browser es nicht, bleibt die dunkle Flaeche allein stehen. */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .vu-vorhang {
    -webkit-backdrop-filter: blur(9px) saturate(.85);
    backdrop-filter: blur(9px) saturate(.85);
    background: rgba(16, 11, 9, .46);
  }
}
.vu-vorhang[hidden] { display: none !important; }

@keyframes vu-auf { from { opacity: 0; } to { opacity: 1; } }

.vu-blatt {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 52px);
  max-height: calc(100dvh - 52px);
  overflow-y: auto;
  /* none statt contain: sonst federt Safari beim Ueberziehen nach und
     zeigt ueber dem Foto einen cremefarbenen Streifen. */
  overscroll-behavior: none;
  background: #F8F2E4;
  color: #3E3E3E;
  border-radius: 16px;
  box-shadow: 0 18px 56px rgba(0, 0, 0, .5);
  font-family: Lora, Georgia, "Times New Roman", serif;
  line-height: 1.55;
  animation: vu-herein .44s cubic-bezier(.22, .8, .3, 1) both;
}

@keyframes vu-herein {
  from { transform: translateY(22px) scale(.98); opacity: 0; }
  to   { transform: none;                        opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vu-blatt, .vu-vorhang { animation: none; }
}

/* ---------- Bildkopf ---------- */

.vu-bild {
  position: relative;
  margin: 0;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  /* Der Untergrund nimmt die Farben des Fotos auf. Kommt das Bild ueber
     eine langsame Mobilverbindung erst nach, sieht man einen
     Sonnenuntergang und keine leere rote Flaeche. */
  background: linear-gradient(180deg, #F0A94E 0%, #D9713F 34%,
                                      #A8452F 62%, #6E2A28 100%);
}
.vu-bild img, .vu-bild svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vu-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(110, 26, 36, 0) 44%,
              rgba(110, 26, 36, .62) 78%,
              rgba(78, 18, 26, .95) 100%);
  pointer-events: none;
}
.vu-marke {
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  z-index: 1;
  text-align: center;
  font-family: Fraunces, Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #F0D6A0;
  text-shadow: 0 1px 3px rgba(60, 12, 18, .55);
}

/* Eriks Zeichen steckt direkt im Stylesheet, nicht als eigene Datei.
   Grund, gemessen am 09.09.2026 bei 400 kbit: als eigener Abruf kam es
   erst nach dem Hinweis an, die Ecke blieb sekundenlang leer. */
.vu-zeichen {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 2;
  display: block;
  width: 54px; height: 54px;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: .82;
  /* Der Schatten traegt das Zeichen ueber den hellen Himmel, dafuer
     braucht es keinen Kreis darunter. */
  filter: drop-shadow(0 1px 4px rgba(40, 14, 16, .55));
}

/* ---------- Text ---------- */

.vu-inhalt { padding: 18px 17px 17px; }

.vu-kicker {
  margin: 0 0 7px;
  font-family: Fraunces, Georgia, serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8C6A2E;
}

.vu-titel {
  margin: 0 0 11px;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(20px, 6.2vw, 33px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: #6E1A24;
  white-space: nowrap;
  text-align: center;
}

.vu-text { margin: 0 0 13px; font-size: 16px; color: #3E3E3E; }
.vu-text strong { color: #6E1A24; font-weight: 600; }

/* Die beiden Daten sind der Grund, warum jemand dieses Fenster liest.
   Sie stehen deshalb als eigener Block, nicht im Fliesstext. */
.vu-daten {
  display: grid;
  gap: 1px;
  margin: 0 0 14px;
  background: #E4D6BC;
  border: 1px solid #E4D6BC;
  border-radius: 8px;
  overflow: hidden;
}
.vu-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 9px 14px;
  background: #FFFCF6;
}
.vu-datum--auf { background: #FBF6EC; }
.vu-datum-was {
  font-family: Fraunces, Georgia, serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8C6A2E;
  flex: none;
}
.vu-datum-wann {
  font-family: Fraunces, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #333333;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vu-datum--auf .vu-datum-wann { color: #6E1A24; }

.vu-nachsatz {
  margin: 0 0 15px;
  padding-left: 13px;
  border-left: 3px solid #B8924A;
  font-size: 15px;
  color: #4A4A4A;
}

/* ---------- Das Haekchen. Kein Standardkaestchen. ---------- */

.vu-merken {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  margin: 0 0 10px;
  padding: 2px 2px;
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.vu-merken:hover .vu-kasten { border-color: #6E1A24; }
.vu-merken:focus-within { outline: 3px solid #6E1A24; outline-offset: 2px; }

/* Das echte Kaestchen bleibt bestehen, es traegt Tastatur und
   Screenreader. Sichtbar ist der gezeichnete Kasten daneben. */
.vu-merken input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
  pointer-events: none;
}

.vu-kasten {
  flex: none;
  width: 26px; height: 26px;
  border: 2.5px solid #B8924A;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(110, 26, 36, .14);
  display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vu-kasten svg {
  width: 16px; height: 16px;
  stroke: #F8F2E4; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset .26s cubic-bezier(.6,.1,.3,1);
}
.vu-merken input:checked ~ .vu-kasten {
  background: #6E1A24;
  border-color: #6E1A24;
  transform: scale(1.07);
}
.vu-merken input:checked ~ .vu-kasten svg { stroke-dashoffset: 0; }


@media (prefers-reduced-motion: reduce) {
  .vu-kasten, .vu-kasten svg { transition: none; }
}

.vu-merken-text { font-size: 15px; line-height: 1.25; color: #4A4A4A; }
.vu-merken-text b { display: block; font-weight: 600; color: #554640; }
.vu-merken-text span { color: #8A7A72; font-size: 12px; }

/* ---------- Knoepfe ---------- */

.vu-knoepfe {
  display: grid;
  grid-template-columns: 46px 46px 1fr;
  gap: 8px;
  align-items: stretch;
}

.vu-knopf {
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
  border-radius: 9px;
  border: 2px solid transparent;
  font-family: Fraunces, Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.vu-knopf:focus-visible { outline: 3px solid #1A1410; outline-offset: 2px; }
.vu-knopf svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.9; fill: none; flex: none; stroke-linecap: round; stroke-linejoin: round; }

.vu-knopf--haupt { background: #6E1A24; color: #F8F2E4; }
.vu-knopf--haupt:hover { background: #56141C; }

.vu-knopf--rand { background: transparent; color: #6E1A24; border-color: #C8AE7E; }
.vu-knopf--rand:hover { border-color: #6E1A24; background: #FBF4F5; }

/* Auf schmalen Geraeten tragen die beiden Aussenlinks nur ihr Zeichen.
   Der Text bleibt fuer Screenreader ueber aria-label erhalten. */
.vu-knopf--zeichen { padding: 0; }
.vu-knopf-wort { display: none; }

@media (min-width: 490px) {
  .vu-knoepfe { grid-template-columns: 1fr 1fr 1.2fr; gap: 9px; }
  .vu-knopf--zeichen { padding: 0 12px; }
  .vu-knopf-wort { display: inline; }
}

/* ---------- ab 490 ---------- */

@media (min-width: 490px) {
  .vu-vorhang { padding: 30px 26px; }
  .vu-bild { aspect-ratio: 2 / 1; }
  .vu-datum { padding: 11px 15px; }
  .vu-blatt { max-width: 520px; }
  .vu-inhalt { padding: 24px 26px 24px; }
  .vu-marke { font-size: 15px; }
}

/* ---------- ab 768: deutlich groesser ---------- */

@media (min-width: 768px) {
  .vu-vorhang { padding: 40px; }
  .vu-titel { margin-bottom: 8px; }
  .vu-text { margin-bottom: 12px; }
  .vu-daten { margin-bottom: 12px; }
  .vu-nachsatz { margin-bottom: 10px; }
  .vu-merken { margin-bottom: 12px; }
  .vu-blatt { max-width: 700px; border-radius: 18px; }
  .vu-bild { aspect-ratio: 2 / 1; border-radius: 18px 18px 0 0; }
  .vu-zeichen { top: 16px; right: 18px; width: 66px; height: 66px; }
  .vu-inhalt { padding: 22px 34px 22px; }
  .vu-titel { font-size: 34px; }
  .vu-text { font-size: 18px; }
  .vu-datum { padding: 13px 18px; }
  .vu-datum-wann { font-size: 20px; }
  .vu-datum-was { font-size: 11.5px; }
  .vu-nachsatz { font-size: 16.5px; }
  .vu-merken-text { font-size: 16.5px; }
  .vu-kasten { width: 28px; height: 28px; }
  .vu-knopf { font-size: 17px; min-height: 50px; }
  .vu-datum-wann { font-size: 18px; }
  .vu-marke { bottom: 9px; font-size: 17px; }
}

/* ---------- ab 1040: die Ruhe eines grossen Schirms ---------- */

@media (min-width: 1040px) {
  .vu-blatt { max-width: 860px; }
  .vu-bild { aspect-ratio: 2 / 1; }
  .vu-inhalt { padding: 24px 44px 24px; }
  .vu-titel { font-size: 40px; }
  .vu-text { font-size: 19px; }
  .vu-datum-wann { font-size: 22px; }
  .vu-nachsatz { font-size: 17px; }
  .vu-merken-text { font-size: 17px; }
  .vu-knopf { font-size: 18px; min-height: 52px; }
}