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

   Aufbau (jede Zeile = volle Fensterbreite, Inhalt = Maincontent-Breite):
   1) Kontaktbar   - hellgrau
   2) Hauptmenü    - weiß
   3) Banner       - hellgrau
   4) Hauptinhalt  - weiß
   5) Bottom-B     - grau, ohne Rahmen
   6) Footer       - schwarz
   ========================================================================== */

:root {
  --cassiopeia-color-primary: #ff1900;
  --cassiopeia-color-primary-hover: #d81400;
  --cassiopeia-body-font-family: "Open Sans", Arial, Helvetica, sans-serif;
  --maincontent-width: 1320px;
}

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

/* --------------------------------------------------------------------------
   BUGFIX: Cassiopeia-Standard-Header hat ein Hintergrundbild (roter/lila
   Gradient "CASSIOPEIA"-Demo-Hero). Reines background-color reicht nicht,
   das Bild liegt IMMER über der Farbe -> muss explizit entfernt werden.
   -------------------------------------------------------------------------- */
.header,
.container-header,
header,
header::before,
header::after {
  background-image: none !important;
  background: none !important;
}

/* ==========================================================================
   1) KONTAKTBAR (Topbar) – volle Breite hellgrau, Inhalt Maincontent-Breite
   ========================================================================== */
.container-topbar {
  width: 100%;
  background-color: #eeeeee !important;
  background-image: none !important;
  padding: 6px 12px;
}
.container-topbar > * {
  max-width: var(--maincontent-width);
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.container-topbar span {
  display: inline-flex;
  align-items: center;
  padding-right: 25px;
}
.container-topbar span:last-child {
  padding-right: 0;
}
.container-topbar,
.container-topbar * {
  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;
}

/* ==========================================================================
   2) HAUPTMENÜ – volle Breite weiß, Menü selbst Maincontent-Breite
   ========================================================================== */
.header,
.container-header {
  background-color: #ffffff !important;
  width: 100%;
}
.container-nav {
  width: 100%;
  background-color: #ffffff !important;
}
.mod-menu.mod-list.nav {
  justify-content: center;
}
.mod-menu.mod-list.nav .nav-item a {
  color: #777777 !important;
  font-size: 22px;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  padding: 22px 18px;
  transition: color 0.2s ease;
  background: none !important;
}
.mod-menu.mod-list.nav .nav-item a:hover {
  color: #ff1900 !important;
}
.mod-menu.mod-list.nav .nav-item.active > a,
.mod-menu.mod-list.nav .nav-item.current > a {
  color: #4392b0 !important;
}

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

/* ==========================================================================
   3) BANNER (Bildergalerie) – volle Breite hellgrau, Bilder Maincontent-Breite
   ========================================================================== */
.container-banner {
  width: 100%;
  background-color: #eeeeee !important;
  padding: 0 !important;
  margin: 0 !important;
}
.container-banner .mod-banners.bannergroup {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: var(--maincontent-width);
  margin: 0 auto !important;
  flex-wrap: wrap;
}
.container-banner .mod-banners__item {
  flex: 1 1 0;
  margin: 0 !important;
}
.container-banner .mod-banners__item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   4) HAUPTINHALT – weiß, Standard-Maincontent-Breite (Cassiopeia-Default)
   ========================================================================== */
.site-grid,
.container-main {
  background-color: #ffffff !important;
}
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; }

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

/* ==========================================================================
   5) BOTTOM-B – volle Breite grau, Inhalt Maincontent-Breite, KEIN Rahmen
   ========================================================================== */
/* Bottom-B ist ein .grid-child im CSS-Grid .site-grid und dadurch von Haus
   aus auf die Inhaltsspalte begrenzt (kein full-width wie beim Banner).
   Fix: eigene Grid-Spalte auf volle Breite spannen (wie .full-width es tut),
   danach den Inhalt (.card) wieder auf Maincontent-Breite zentrieren. */
.grid-child.container-bottom-b,
.container-bottom-b {
  grid-column: 1 / -1 !important;
  width: 100%;
  background-color: #f0f0f0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.container-bottom-b .bottom-b.card,
.container-bottom-b .card {
  max-width: var(--maincontent-width);
  width: 100%;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.container-bottom-b .card-body {
  padding: 0 !important;
  margin: 0 !important;
}
.container-bottom-b p {
  margin: 0 !important;
  padding: 0 !important;
}
.container-bottom-b iframe {
  max-width: 100%;
  display: block;
  margin: 0 !important;
}
.container-bottom-b .card,
.container-bottom-b .moduletable,
.container-bottom-b .mod-custom,
[class*="container-bottom-b"] .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ==========================================================================
   6) FOOTER – volle Fensterbreite anthrazit (kein Verlauf), Inhalt zentriert
      auf Maincontent-Breite. Defensive Selektoren, da genaue Klasse des neu
      angelegten Footer-Moduls noch nicht bekannt ist.
   ========================================================================== */
footer,
.footer,
.container-footer,
[class*="footer"] {
  background-image: none !important;
  background-color: #262626 !important;
  background: #262626 !important;
  color: #ffffff;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.grid-child[class*="footer"] {
  grid-column: 1 / -1 !important;
}
.container-footer > *,
footer > *,
.footer > *,
[class*="footer"] > * {
  max-width: var(--maincontent-width);
  width: 100%;
  margin: 0 auto !important;
  box-sizing: border-box;
}
/* Bekannte konkrete Struktur (per Inspector bestätigt):
   footer.container-footer.footer.full-width > div.grid-child > #mod-custom.mod-custom.custom
   Statt die Box auf 100% Breite zu zwingen (kollidiert mit dem Flex-Verhalten
   von Cassiopeia), wird sie stattdessen exakt am rechten Rand der
   Maincontent-Spalte ausgerichtet - gleicher Randabstand wie Topbar/Nav/Banner. */
footer.container-footer.footer {
  display: block !important;
}
footer.container-footer.footer > .grid-child {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  margin-left: auto !important;
  margin-right: max(12px, calc((100% - var(--maincontent-width)) / 2)) !important;
  padding: 24px 0 70px !important;
  box-sizing: border-box;
}
.container-footer .mod-custom.custom,
.container-footer p,
footer .mod-custom.custom,
footer p,
[class*="footer"] .mod-custom.custom,
[class*="footer"] p {
  color: #ffffff;
  text-align: right !important;
  font-size: 13px;
  margin: 0;
}
/* Kein !important auf font-size/color hier - sonst lassen sich einzelne
   Absätze/Spans im Modul-Editor nicht mehr individuell formatieren
   (Schriftgröße etc. würde vom CSS erzwungen und Inline-Styles ignoriert). */
.container-footer a,
footer a,
[class*="footer"] a {
  color: #ffffff;
}
.container-footer a:hover,
footer a:hover,
[class*="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 .grid-child,
  .container-topbar .container {
    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; }
}