/* ============================================================
   ROESSLE ELZACH - Buchungs- und Genusspanel
   ============================================================
   Desktop : Panel faehrt rechts ein. X schliesst, Reiter am Rand holt es zurueck.
   Mobil   : Balken unten, Panel faehrt auf Tipp von unten hoch.
   ============================================================ */

.rp-panel,.rp-tab{
  --rp-header:150px;              /* wird per Konfiguration ueberschrieben */
  --rp-bordeaux:#8C0100;
  --rp-bordeaux-dark:#6E1524;
  --rp-messing:#A6874E;
  --rp-messing-dark:#8F7241;
  --rp-creme:#F8F5EF;
  --rp-line:#DED4C4;
  --rp-anthrazit:#2B2925;
  --rp-text:#3A3630;
  --rp-mute:#6E675D;
}

/* ---------- Huelle ---------- */
.rp-panel{
  position:fixed;top:calc(var(--rp-header) + 8px);right:12px;
  width:344px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - var(--rp-header) - 16px);
  display:flex;flex-direction:column;
  z-index:9999999;color:var(--rp-text);
  font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;
  transform:translateX(0);
  /* sanftes, langsames Einfahren */
  transition:transform .85s cubic-bezier(.22,.9,.24,1), opacity .6s ease;
}
.rp-panel *{box-sizing:border-box}
.rp-panel.rp-closed{transform:translateX(140%);opacity:0;pointer-events:none}

/* ---------- Theme-Reset gegen Salient ---------- */
.rp-panel p,.rp-panel h2{margin:0 !important}
.rp-panel a{box-shadow:none !important;text-decoration:none !important}
.rp-panel a:not(.rp-tile):not(.rp-btn):not(.rp-special){border:0 !important}

.rp-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;padding:0 0 2px;
}

/* ---------- Karte: bewusst ohne Schatten ---------- */
.rp-card{
  position:relative;background:var(--rp-creme);
  padding:12px 18px 12px;
}
.rp-card__title{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  font-size:20px;line-height:1.1;color:var(--rp-bordeaux);text-align:center;
  text-transform:none;letter-spacing:0;
}
.rp-card__rule{width:30px;height:1px;background:var(--rp-messing);margin:8px auto 16px}

.rp-close{
  position:absolute;top:5px;right:5px;width:36px;height:36px;
  border:0;background:transparent;cursor:pointer;color:var(--rp-mute);
  font-size:25px;line-height:1;padding:0;z-index:3;
}
.rp-close:hover{color:var(--rp-bordeaux)}

/* ---------- Nutzenzeilen ---------- */
/* Zentriert gestapelt: Thema, darunter Beschreibung, Leerzeile zur naechsten Gruppe.
   Gleiche Laufschrift wie das ganze Panel (Helvetica), kein Caps-Lock. */
.rp-values-wrap{text-align:center}
.rp-values{display:block}
.rp-value{margin:0 0 15px}
.rp-value:last-child{margin-bottom:0}
.rp-value-title{
  font-size:13px;font-weight:700;color:var(--rp-anthrazit);line-height:1.3;margin:0;
}
.rp-value-text{font-size:12.5px;line-height:1.35;color:var(--rp-text);margin:3px 0 0}

.rp-sep{height:1px;background:var(--rp-line);margin:15px 0}

/* ---------- Auszeichnungen ---------- */
.rp-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:end}
.rp-badge{display:flex;flex-direction:column;align-items:center;gap:3px}
.rp-badge-art{height:34px;display:flex;align-items:center;justify-content:center}
.rp-badge-art img{max-height:34px;max-width:100%;object-fit:contain;display:block}
.rp-badge-cap{font-size:8.5px;color:var(--rp-mute);letter-spacing:.04em;text-align:center;line-height:1.2}
.rp-badge:hover .rp-badge-cap{color:var(--rp-bordeaux)}

/* ---------- Storno ---------- */
.rp-storno{text-align:center}
.rp-storno .h{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:13.5px;color:var(--rp-bordeaux);line-height:1.2}
.rp-storno .t{font-size:11.5px;color:var(--rp-text);margin-top:3px}

/* ---------- Buttons: alle exakt gleiche Hoehe (46px) ---------- */
.rp-btn{
  display:flex;align-items:center;justify-content:center;width:100%;text-align:center;
  min-height:46px;padding:8px 14px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:bold;border-radius:6px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.rp-btn--primary{
  background:var(--rp-bordeaux);color:#fff !important;
  border:1px solid var(--rp-bordeaux) !important;margin-top:8px;
}
.rp-btn--primary:hover{background:#fff;border-color:var(--rp-bordeaux) !important;color:var(--rp-bordeaux) !important}

/* ---------- Einheitliche Link-Kacheln (ein Stil fuer alle sekundaeren Ziele) ---------- */
.rp-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rp-link{
  display:flex !important;align-items:center;justify-content:center;text-align:center;
  min-height:40px;padding:7px 10px;background:#fff;border-radius:6px;
  border:1px solid var(--rp-line) !important;
  color:var(--rp-anthrazit);font-size:12px;font-weight:600;line-height:1.15;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.rp-link:hover{border-color:var(--rp-messing) !important;color:var(--rp-bordeaux);background:#FFFDF9}
.rp-link--wide{grid-column:1 / -1}
.rp-link .rp-en{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-messing);margin-left:7px;font-weight:700}

/* Wer im Betriebssystem Bewegung reduziert hat, bekommt nur ein Einblenden */
@media (prefers-reduced-motion:reduce){
  .rp-panel{transition:opacity .25s ease}
}

/* ---------- Reiter ---------- */
/* Reiter: im Ruhezustand komplett unsichtbar, damit nichts an den Rand blutet */
.rp-tab{
  position:fixed;top:50%;right:0;transform:translateY(-50%) translateX(100%);
  background:var(--rp-bordeaux);color:#fff;border:1px solid transparent;box-sizing:border-box;cursor:pointer;
  padding:16px 11px;writing-mode:vertical-rl;
  font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;visibility:hidden;
  transition:transform .35s ease,opacity .25s ease,visibility 0s linear .35s,background .2s ease,border-color .2s ease,color .2s ease;
  z-index:9999998;
}
.rp-tab.rp-show{
  transform:translateY(-50%) translateX(0);
  opacity:1;visibility:visible;transition-delay:0s;
}
.rp-tab:hover{background:#fff;border-color:var(--rp-bordeaux);color:var(--rp-bordeaux)}

/* ---------- Mobil. Breite muss zu mobilAbBreite in der Konfiguration passen ---------- */
/* Balken-Inhalt. Der Hop wird auf den Inhalt gelegt, nicht auf den Balken,
   weil dessen transform bereits die Position steuert. */
.rp-tab-inner{display:flex;align-items:center;justify-content:center;gap:9px}
.rp-tab-ico{display:none;line-height:0}

/* Huepfer liegt am Anfang des Zyklus, danach lange Ruhe */
@keyframes rpHop{
  0%        {transform:translateY(0)}
  6%        {transform:translateY(-7px)}
  12%       {transform:translateY(0)}
  17%       {transform:translateY(-3px)}
  23%, 100% {transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .rp-tab-inner{animation:none !important}
}

@media (max-width:820px){
  /* Bottom-Sheet, sonst genauso aufgebaut wie der Desktop: freie Karten, transparente Luft */
  .rp-panel{
    top:auto;bottom:0;right:0;left:0;width:100%;max-width:none;
    max-height:94vh;transform:translateY(0);
    background:transparent;border-top:0;
  }
  .rp-panel.rp-closed{transform:translateY(112%);opacity:1}
  .rp-scroll{gap:10px;padding:10px 12px 14px}

  /* Kompakt fuer kleine Geraete, alles ohne Scrollen sichtbar */
  .rp-card{padding:16px 18px 16px}
  .rp-card__title{font-size:21px}
  .rp-card__rule{margin:7px auto 13px}
  .rp-close{width:44px;height:44px;font-size:28px;top:3px;right:3px}
  .rp-value-title{font-size:13.5px}
  .rp-value-text{font-size:12.5px}
  .rp-value{margin-bottom:12px}

  /* Auszeichnungs-Logos auf kleinen Geraeten ausblenden, spart Hoehe */
  .rp-sep--badges,.rp-badges{display:none}

  .rp-storno .h{font-size:14px}
  .rp-storno .t{font-size:12px}
  .rp-btn{font-size:12px;min-height:48px}
  .rp-link{min-height:44px;font-size:12.5px}

  .rp-tab{
    top:auto;bottom:0;right:0;left:0;transform:translateY(100%);
    writing-mode:horizontal-tb;padding:18px 15px;letter-spacing:.18em;font-size:12px;
  }
  .rp-tab.rp-show{transform:translateY(0)}
  .rp-tab-ico{display:inline-flex}
  .rp-tab.rp-show .rp-tab-inner{animation:rpHop 5.5s ease-in-out .3s infinite}
}

/* Unter 576px uebernimmt der "Tisch Reservieren"-Button der bestehenden
   mobile-buttons-Leiste (tp.js) das Oeffnen des Panels. Der eigene Reiter
   wuerde sonst an derselben Stelle liegen und sich mit dieser Leiste ueberlappen. */
@media (max-width:576px){
  .rp-tab{display:none !important}
}