/* Gucken ohne Oeffnen — das Aussehen zu vorschau.js.

   Eigene Datei, weil zwei Fenster sie brauchen: das Hauptfenster und die
   Booking Suite, die in einem eigenen Rahmen laeuft und styles.css nicht
   laedt. Eine Kopie waere irgendwann eine zweite Wahrheit. */
.vs-schicht{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center;
  padding:40px; background:rgba(8,16,30,0); opacity:0; pointer-events:none;
  transition:opacity .16s ease, background .16s ease; }
.vs-schicht.auf{ opacity:1; pointer-events:auto; background:rgba(8,16,30,.52); }
.vs-blatt{ width:min(1000px,100%); height:min(760px,100%); display:flex; flex-direction:column;
  background:var(--ci-card,#fff); color:var(--ci-ink,#17324d); border-radius:18px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(6,14,30,.65); transform:scale(.97);
  transition:transform .16s cubic-bezier(.2,.9,.25,1); }
.vs-schicht.auf .vs-blatt{ transform:scale(1); }
.vs-kopf{ display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--ci-line,#e4eaf2); flex:0 0 auto; }
.vs-nm{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%; }
.vs-sub{ color:var(--ci-mut,#6b7f95); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-sp{ flex:1; }
.vs-knopf{ all:unset; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent,#2f7ad6);
  padding:6px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--ci-line,#e4eaf2); }
.vs-knopf:hover{ background:rgba(var(--accent-rgb,47,122,214),.08); }
.vs-x{ all:unset; cursor:pointer; width:28px; height:28px; border-radius:50%; display:grid;
  place-items:center; color:var(--ci-mut,#6b7f95); font-size:14px; }
.vs-x:hover{ background:var(--ci-soft,#f2f6fb); color:var(--ci-ink,#17324d); }
.vs-buehne{ flex:1; min-height:0; display:grid; place-items:center; overflow:auto; background:var(--ci-soft,#f5f8fc); }
.vs-bild{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.vs-rahmen{ width:100%; height:100%; border:0; background:#fff; }
.vs-html{ width:100%; height:100%; }
.vs-text{ margin:0; padding:18px 20px; width:100%; height:100%; overflow:auto; box-sizing:border-box;
  background:#fff; font:12.5px/1.6 ui-monospace,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.vs-ton{ padding:24px; }
.vs-karte{ width:100%; max-width:560px; padding:18px 22px; }
.vs-zeile{ display:flex; gap:14px; padding:9px 0; border-bottom:1px solid var(--ci-line,#e4eaf2); font-size:13px; }
.vs-zeile span{ color:var(--ci-mut,#6b7f95); flex:0 0 132px; }
.vs-zeile b{ flex:1; min-width:0; word-break:break-word; }
.vs-leise{ color:var(--ci-mut,#6b7f95); font-size:13px; padding:28px; }
/* Anhaenge: eine Leiste zwischen Buehne und Tastenhinweis. Sie umbricht,
   damit auch acht Anhaenge nicht aus dem Blatt laufen. */
.vs-anh{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding:9px 14px; border-top:1px solid var(--ci-line,rgba(16,24,40,.10)); }
.vs-anh[hidden]{ display:none; }
.vs-anh-t{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ci-mut,#6b7f95); margin-right:3px; }
.vs-anh-k{ display:inline-flex; align-items:baseline; gap:7px; max-width:230px;
  font:inherit; font-size:12px; cursor:pointer; padding:5px 11px; border-radius:16px;
  border:1px solid var(--ci-line,rgba(16,24,40,.10)); background:var(--ci-feld,#f1f3f8);
  color:var(--ci-ink,#17324d); }
.vs-anh-k:hover:not(:disabled){ border-color:var(--ci-akz,#1a9bdb); }
.vs-anh-k:disabled{ opacity:.55; cursor:default; }
.vs-anh-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-anh-g{ flex:none; font-size:11px; color:var(--ci-mut,#6b7f95); font-variant-numeric:tabular-nums; }

.vs-fuss{ flex:0 0 auto; padding:9px 14px; font-size:11.5px; color:var(--ci-mut,#6b7f95);
  border-top:1px solid var(--ci-line,#e4eaf2); text-align:center; }
body.vs-offen{ overflow:hidden; }
/* Neben der Liste statt darüber: Das Blatt beginnt rechts von dem Bereich,
   den die Quelle freihält — die Mailliste bleibt sichtbar und anklickbar. */
.vs-schicht.vs-neben{ left:var(--vs-links,0px); padding:16px 16px 16px 12px; background:rgba(8,16,30,.28); }
.vs-schicht.vs-neben .vs-blatt{ width:100%; height:100%; }
/* Die Zeile, die gerade gezeigt wird. */
.vs-aktiv{ position:relative; box-shadow:inset 3px 0 0 var(--accent,#2f7ad6), 0 0 0 1px rgba(var(--accent-rgb,47,122,214),.35) !important;
  background:rgba(var(--accent-rgb,47,122,214),.10) !important; border-radius:8px; }
/* Das Auge am Zeilenrand — der sichtbare Weg zur unsichtbaren Taste. */
.vs-auge{ position:fixed; z-index:9400; width:26px; height:26px; border:0; padding:0; border-radius:50%;
  display:none; place-items:center; cursor:pointer; color:var(--ci-mut,#5b6b7c);
  background:var(--ci-card,#fff); box-shadow:0 2px 10px -2px rgba(9,20,44,.35), inset 0 0 0 1px var(--ci-line,#e4eaf2); }
.vs-auge.auf{ display:grid; }
.vs-auge:hover{ color:var(--accent,#2f7ad6); box-shadow:0 4px 14px -2px rgba(9,20,44,.45), inset 0 0 0 1px var(--accent,#2f7ad6); }
.vs-auge .material-symbols-rounded{ font-size:15px; }
/* Der Anstupser: einmal im Leben, im richtigen Moment. */
.vs-stups{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:9450;
  display:none; align-items:center; gap:11px; padding:11px 14px; border-radius:12px;
  background:var(--ci-card,#fff); color:var(--ci-ink,#17324d); font-size:13px;
  box-shadow:0 24px 50px -22px rgba(9,20,44,.6), inset 0 0 0 1px var(--ci-line,#e4eaf2);
  opacity:0; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.25,1); }
.vs-stups.auf{ display:flex; opacity:1; transform:translate(-50%,0); }
.vs-taste{ font:12px ui-monospace,Consolas,monospace; padding:2px 9px; border-radius:6px;
  background:var(--ci-soft,#f2f6fb); box-shadow:inset 0 0 0 1px var(--ci-line,#e4eaf2); }
.vs-stups-ok{ all:unset; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent,#2f7ad6);
  padding:5px 10px; border-radius:999px; }
.vs-stups-ok:hover{ background:rgba(var(--accent-rgb,47,122,214),.1); }
@media (prefers-reduced-motion: reduce){ .vs-schicht, .vs-blatt{ transition:none; } }