/* ==========================================================================
   Gasthof Poandl – Cassiopeia Design (1:1 Nachbau von poandl.at)
   Ziel-Datei: /media/templates/site/cassiopeia/css/user.css  (PARENT-Template!)
   ========================================================================== */

/* --- Cassiopeia Grundfarben überschreiben ------------------------------- */
:root {
  --cassiopeia-color-primary: #ff1900;      /* Rot: Icons, Back-to-Top, Buttons */
  --cassiopeia-color-primary-hover: #d81400;
  --cassiopeia-body-font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

html, body {
  background-color: #f6f6f6 !important;
  color: #555555;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

/* --- Topbar (Adresse / Telefon / E-Mail) -------------------------------- */
.container-topbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #eeeeee;
}
.container-topbar .topbar-inner,
.container-topbar > .mod-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 10px 12px;
  font-size: 14px;
  color: #555555;
}
.container-topbar i,
.container-topbar .fa, .container-topbar .fas, .container-topbar .far {
  color: #ff1900 !important;
  margin-right: 6px;
}
.container-topbar a {
  color: #555555;
  text-decoration: none;
}
.container-topbar a:hover {
  color: #ff1900;
}

/* --- Hauptnavigation ------------------------------------------------------ */
.header {
  background-color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.grid-child.container-nav {
  max-width: none !important;
}
.mod-menu.mod-list.nav {
  justify-content: center;
}
.mod-menu.mod-list.nav .nav-item a {
  color: #777777;
  font-size: 22px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  padding: 22px 18px;
  transition: color 0.2s ease;
}
.mod-menu.mod-list.nav .nav-item a:hover {
  color: #ff1900;
}
.mod-menu.mod-list.nav .nav-item.active > a,
.mod-menu.mod-list.nav .nav-item.current > a {
  color: #4392b0;
}

/* Desktop: Menü in Reihe statt Cassiopeia-Standard (Spalte) */
@media (min-width: 768px) {
  .mod-menu.mod-list.nav {
    flex-direction: row !important;
  }
}

/* --- Willkommens-/Bildergalerie (Banner) --------------------------------- */
.container-banner.full-width {
  background-color: #f6f6f6;
  padding: 24px 0 0;
}
.container-banner .mod-banners.bannergroup {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
.container-banner .mod-banners__item img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Inhaltsbereich -------------------------------------------------------- */
.site-grid,
.container-main {
  max-width: 1080px !important;
  margin: 0 auto;
  background-color: #ffffff;
}
h1, h2 {
  color: #555555;
  font-weight: 300;
}
h2 {
  font-size: 30px;
}
h3 {
  color: #555555;
  font-size: 24px;
  font-weight: 300;
}
p {
  font-size: 14px;
  line-height: 23.8px;
  color: #555555;
}
a {
  color: #222222;
}
a:hover {
  color: #ff1900;
}
strong, b {
  color: #333333;
  font-weight: 700;
}

/* Preistabelle */
table {
  width: 100%;
  border-collapse: collapse;
}
table td, table th {
  padding: 6px 12px 6px 0;
  font-size: 14px;
}

/* --- Footer ---------------------------------------------------------------- */
.container-footer.footer {
  background-color: #000000 !important;
  color: #ffffff;
  padding: 24px 0;
}
.container-footer .mod-custom.custom,
.container-footer p {
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  margin: 0;
}
.container-footer a {
  color: #ffffff;
}
.container-footer a:hover {
  color: #ff1900;
}

/* --- Back-to-Top-Button ----------------------------------------------------- */
#back-top .back-to-top-link {
  background-color: #ff1900 !important;
  border-radius: 50%;
  color: #ffffff !important;
}
#back-top .back-to-top-link:hover {
  background-color: #d81400 !important;
}

/* --- Mobile ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .container-topbar .topbar-inner,
  .container-topbar > .mod-custom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .mod-menu.mod-list.nav .nav-item a {
    font-size: 18px;
    padding: 14px 18px;
  }
  h2 { font-size: 24px; }
}