/* Kontakt-Slideout – Contao 4.4 | files/slideout/slideout.css */

.contact-slideout {
  /* Anpassbar */
  --so-w: min(82vw, 280px);   /* Breite des Panels */
  --so-toggle: 52px;          /* Kantenlänge des Icon-Buttons */
  --so-accent: #012f8e;
  --so-accent-hover: #012f8e;
  --so-bg: #ffffff;
  --so-fg: #012f8e;
  --so-fg-light: #009ee1;
  --so-speed: .3s;

  position: fixed;
  top: 40%;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;

  /* Zustand 1: komplett ausgeblendet (Header noch sichtbar) */
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition: transform var(--so-speed) ease, visibility 0s linear var(--so-speed);
}

.contact-slideout *,
.contact-slideout *::before,
.contact-slideout *::after {
  box-sizing: border-box;
}

/* Zustand 2: eingeblendet, eingeklappt – nur der Button ragt heraus */
.contact-slideout.is-visible {
  transform: translate3d(var(--so-w), 0, 0);
  visibility: visible;
  transition: transform var(--so-speed) ease, visibility 0s;
}

/* Zustand 3: ausgeklappt */
.contact-slideout.is-visible.is-open {
  transform: translate3d(0, 0, 0);
}

/* ---- Toggle-Button ------------------------------------------------------ */
.contact-slideout__toggle {
  flex: 0 0 var(--so-toggle);
  width: var(--so-toggle);
  height: var(--so-toggle);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: var(--so-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, .25);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease;
}

.contact-slideout__toggle:hover,
.contact-slideout__toggle:focus-visible {
  background: var(--so-accent-hover);
}

.contact-slideout__toggle:focus-visible {
  outline: 3px solid #000;
  outline-offset: -5px;
}

.contact-slideout__icon--close { display: none; }
.contact-slideout.is-open .contact-slideout__icon--open  { display: none; }
.contact-slideout.is-open .contact-slideout__icon--close { display: block; }

/* ---- Panel -------------------------------------------------------------- */
.contact-slideout__panel {
  flex: 0 0 var(--so-w);
  width: var(--so-w);
  padding: 16px 20px 16px 20px;
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  background: var(--so-bg);
  color: var(--so-fg);
  border-radius: 0 0 0 6px;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, .25);

  /* geschlossen: nicht fokussierbar (Tastatur/Screenreader) */
  visibility: hidden;
  transition: visibility 0s linear var(--so-speed);
}

.contact-slideout.is-open .contact-slideout__panel {
  visibility: visible;
  transition: visibility 0s;
}

.contact-slideout__title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.2;
}

.contact-slideout__list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.contact-slideout__link {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 10px;
  min-height: 44px;              /* Touch-Target */
  color: var(--so-fg) !important;
  text-decoration: none;
  word-break: break-word;
}

.contact-slideout__link svg { flex: 0 0 20px; color: var(--so-fg-light); }
.contact-slideout__link:hover span,
.contact-slideout__link:focus-visible span { text-decoration: underline; }

/* ---- Mobil -------------------------------------------------------------- */
@media (max-width: 767px) {
  .contact-slideout {
    top: auto;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .contact-slideout__panel {
    border-radius: 0 0 0 6px;
  }
}

/* ---- Barrierefreiheit / Print ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact-slideout,
  .contact-slideout__toggle { transition: none; }
}

@media print {
  .contact-slideout { display: none !important; }
}