/* ============================================================================
   Bauteil: Buchungsschicht — v1.2

   F13: Der STARTZUSTAND steht hier, nicht in JS.
   [data-zustand="auto"] heisst: dieses Regelwerk entscheidet.
     · unter 640 px  → Pille (Karte aus)
     · ab   640 px  → Karte (Pille aus)
   Erst wenn der Nutzer klickt, schreibt JS "karte" oder "pille" hinein.
   Weil nichts im Fluss liegt (position:fixed) und der Startzustand feststeht,
   entsteht kein Layout-Sprung.

   Die Schicht ist bewusst NICHT in der Kundenmarke gehalten (dunkles Navy),
   damit sie nie mit der Seite darunter verwechselt wird.
   ========================================================================== */

.rv, .rv-aus {  /* v1.4: Stellschrauben auch fürs Ausstiegs-Fenster — es hängt direkt in <body>, außerhalb von .rv */
  /* --- Stellschrauben ---------------------------------------------------- */
  --rv-grund:    #0d1a2c;
  --rv-linie:    #27405f;
  --rv-text:     #e9f0f8;
  --rv-leise:    #a9bdd6;
  --rv-akzent:   #ff7716;
  --rv-auf-akz:  #0b0d10;
  --rv-abstand:  18px;          /* Abstand zum Rand; hochsetzen bei fixer Fussleiste */
  --rv-breite:   318px;
  --rv-dauer:    240ms;
  --rv-kurve:    cubic-bezier(.23,1,.32,1);
}
.rv {
  position: fixed;
  right: var(--rv-abstand);
  /* `--rv-freiraum-unten` ist die eine Stelle, an der eine Seite der Schicht
     sagen kann: unten steht schon etwas. Ohne sie legte sich die Pille am
     10.09.2026 ueber den neuen Handy-Balken — zwei Handlungsaufrufe uebereinander,
     und der der Kundenseite lag unten. Die Seite setzt die Variable, das Bauteil
     rechnet sie ein; ohne Angabe bleibt alles wie bisher. */
  bottom: calc(var(--rv-abstand) + var(--rv-freiraum-unten, 0px));
  z-index: 9000;
  font-family: inherit;
  transition: opacity var(--rv-dauer) var(--rv-kurve), visibility var(--rv-dauer);
}

/* Solange der Leser den ersten Bildschirm nicht verlassen hat, schwebt hier
   NICHTS über dem Inhalt — weder Karte noch Pille. So kann die Schicht den
   Haupt-Knopf der Seite gar nicht erst verdecken. */
.rv[data-sichtbar="false"] { opacity: 0; visibility: hidden; pointer-events: none; }

/* --------------------------------------------------------------------------
   Der Startzustand — allein aus CSS (F13)
   -------------------------------------------------------------------------- */
.rv[data-zustand="auto"]  .rv-karte { display: none; }
.rv[data-zustand="auto"]  .rv-pille { display: inline-flex; }
@media (min-width: 640px) {
  .rv[data-zustand="auto"] .rv-karte { display: block; }
  .rv[data-zustand="auto"] .rv-pille { display: none; }
}
/* Ab hier hat der Nutzer gehandelt — das gilt dann auf jeder Breite. */
.rv[data-zustand="pille"] .rv-karte { display: none; }
.rv[data-zustand="pille"] .rv-pille { display: inline-flex; }
.rv[data-zustand="karte"] .rv-karte { display: block; }
.rv[data-zustand="karte"] .rv-pille { display: none; }

/* --------------------------------------------------------------------------
   Karte (Desktop-Normalfall)
   -------------------------------------------------------------------------- */
.rv-karte {
  position: relative;
  width: var(--rv-breite);
  max-width: calc(100vw - 2 * var(--rv-abstand));
  padding: 18px 18px 16px;
  background: var(--rv-grund);
  color: var(--rv-text);
  border: 1px solid var(--rv-linie);
  border-radius: 14px;
  box-shadow: 0 22px 54px -14px rgba(0,0,0,.7);
  animation: rv-auf var(--rv-dauer) var(--rv-kurve) backwards;
}
/* backwards, nicht both — ein Eintritt darf spätere Zustände nicht überstimmen (F5). */
@keyframes rv-auf { from { opacity: 0; transform: scale(.94) translateY(10px); } }

.rv-marke {
  display: block;
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--rv-akzent);
}
.rv-titel { margin: 10px 0 6px; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--rv-text); }
.rv-text  { margin: 0 0 14px;  font-size: 13.5px; line-height: 1.5;  color: var(--rv-leise); }

.rv-knopf {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 16px;
  background: var(--rv-akzent); color: var(--rv-auf-akz);
  font-size: 14px; font-weight: 700; text-decoration: none;
  border-radius: 9px;
}
.rv-zweit {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; margin-top: 4px;
  font-size: 12.5px; color: var(--rv-leise); text-decoration: none;
}
.rv-zweit:hover { color: var(--rv-text); }

.rv-zu {
  position: absolute; top: 4px; right: 4px;
  width: 44px; height: 44px;              /* Fingerkuppen-Maß */
  background: transparent; border: 0; border-radius: 8px;
  color: var(--rv-leise); font-size: 18px; line-height: 1; cursor: pointer;
}
.rv-zu:hover { color: var(--rv-text); background: rgba(255,255,255,.08); }

/* --------------------------------------------------------------------------
   Pille (Handy-Normalfall) — schmal, in der Ecke, nie über der Seitenmitte
   -------------------------------------------------------------------------- */
.rv-pille {
  align-items: center; gap: 9px;
  min-height: 46px; padding: 0 18px;
  background: var(--rv-grund); color: var(--rv-text);
  border: 1px solid var(--rv-linie); border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.65);
}
.rv-pille::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rv-akzent);
}
.rv-knopf:active, .rv-pille:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .rv-knopf:hover { background: color-mix(in srgb, var(--rv-akzent) 88%, #fff); }
  .rv-pille:hover { border-color: #3d6294; }
}

/* Am Handy bleibt die Pille rechts unten und läuft NICHT über die Breite —
   eine Leiste über die volle Breite deckt den Haupt-Knopf der Seite zu. */
@media (max-width: 639px) {
  .rv { --rv-abstand: 12px; }
  .rv-karte { width: calc(100vw - 24px); }
}

/* --------------------------------------------------------------------------
   Ausstiegs-Fenster
   -------------------------------------------------------------------------- */
.rv-aus {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center; padding: 22px;
  background: rgba(6,10,16,.7);
  opacity: 0; visibility: hidden;
  transition: opacity var(--rv-dauer, 240ms) cubic-bezier(.23,1,.32,1), visibility var(--rv-dauer, 240ms);
}
.rv-aus[data-offen="true"] { opacity: 1; visibility: visible; }
.rv-aus-box {
  position: relative;
  max-width: 420px; padding: 28px;
  background: #0d1a2c; color: #e9f0f8;
  border: 1px solid #27405f; border-radius: 16px;
  text-align: center;
}
.rv-aus-box .rv-marke { text-align: center; }
.rv-aus-box h3 { margin: 12px 0 8px; font-size: 21px; font-weight: 700; line-height: 1.25; color: #fff; }
.rv-aus-box p  { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: #a9bdd6; }
.rv-nein {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 0; color: #8ba4c4;
  font: inherit; font-size: 13.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.rv-nein:hover { color: #e9f0f8; }
.rv-aus-box .rv-zu { color: #8ba4c4; }

@media (prefers-reduced-transparency: reduce) { .rv-aus { background: #060a10; } }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-aus { transition-duration: 1ms; }
  .rv-karte { animation: none; }
  .rv-knopf:active, .rv-pille:active { transform: none; }
}

/* Auch der Text der Agentur-Ebene ist Text, den jemand liest: am Handy 16 px.
   Gemessen 10.09.2026 in der zweiten Endkontrolle — 13,5 px auf jeder Seite. */
@media (max-width: 860px){
  .rv-text{ font-size: 16px; line-height: 1.5 }
}