/* ══════════════════════════════════════════════════════════════════
   v16/contact.css — Sticky Kontakt, zweite Fassung.

   Desktop (ab 900px): schmale Lasche am rechten Bildschirmrand mit dem
   Wort „Kontakt". Sie liegt AM Rand, nie ueber Inhalt. Klick oeffnet
   ein Panel mit Anrufen, E-Mail, Erstgespraech, Rueckruf, Socials.

   Handy (unter 900px): Leiste am unteren Rand mit zwei Textbuttons
   („Anrufen", „Erstgespraech"). Faehrt erst ein, wenn der Hero
   durchgescrollt ist — im Hero stehen schon die grossen Buttons.
   Kein Icon-Kreis, keine Ueberlappung. Markup baut v16/contact.js.
   ══════════════════════════════════════════════════════════════════ */

/* ── Desktop: Lasche ── */
.rct-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 9000;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: 20px 13px 20px 12px;
  border: none;
  border-radius: 0 10px 10px 0;          /* nach der Drehung: links gerundet */
  background: var(--gold, #A07830);
  color: #1A1A1A;
  font: 700 0.72rem/1 'Roboto Condensed', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
  transition: background 0.2s, padding 0.2s;
}
.rct-tab:hover { background: #C9A84C; padding-right: 18px; }
.rct-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Desktop: Panel neben der Lasche ── */
.rct-panel {
  position: fixed;
  right: 56px;
  top: 50%;
  z-index: 9000;
  width: 300px;
  padding: 8px;
  transform: translateY(-50%);
  background: rgba(30, 30, 30, 0.97);
  border: 1px solid rgba(160, 120, 48, 0.3);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: rctIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  font-family: 'Roboto', sans-serif;
}
.rct-panel[hidden] { display: none; }
@keyframes rctIn {
  from { opacity: 0; transform: translateY(-50%) translateX(8px); }
  to   { opacity: 1; transform: translateY(-50%); }
}
.rct-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 8px;
  font: 700 0.66rem/1 'Roboto Condensed', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A84C;
}
.rct-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.rct-close:hover { color: #fff; }
.rct-item {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: none;
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  transition: background 0.15s;
}
.rct-item:hover { background: rgba(160, 120, 48, 0.14); }
.rct-item b { display: block; font: 700 0.82rem/1.2 'Roboto Condensed', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.rct-item small { display: block; font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.rct-soc {
  display: flex;
  gap: 16px;
  padding: 12px 14px 12px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.rct-soc a {
  font: 700 0.7rem/1 'Roboto Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C9A84C;
  text-decoration: none;
}
.rct-soc a:hover { color: #fff; }

/* ── Handy: Leiste unten ── */
.rct-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(26, 26, 26, 0.96);
  border-top: 1px solid rgba(160, 120, 48, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.rct-bar.on { transform: none; }
.rct-bar a {
  flex: 1;
  display: block;
  padding: 14px 12px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font: 700 0.78rem/1 'Roboto Condensed', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rct-bar .rct-call { color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.rct-bar .rct-book { color: #1A1A1A; background: var(--gold, #A07830); }
.rct-bar .rct-book:active, .rct-bar .rct-call:active { transform: scale(0.98); }

@media (max-width: 899px) {
  .rct-tab, .rct-panel { display: none !important; }
  .rct-bar { display: flex; }
  body.rct-bar-on { padding-bottom: 72px; }   /* nichts verschwindet hinter der Leiste */
}

/* Unsichtbar, solange etwas anderes den Rand belegt */
body:has(#cookie-banner.visible) .rct-bar,
body:has(.mob-menu.open) .rct-bar,
body:has(.rcb-overlay.open) .rct-bar,
body:has(.rcb-overlay.open) .rct-tab { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rct-panel { animation: none; }
  .rct-bar { transition: none; }
}
@media print { .rct-tab, .rct-panel, .rct-bar { display: none !important; } }