/* Joomla 6 / Cassiopeia Child Laienspiel */
:root {
  --laienspiel-bordeaux: #4a1714;
  --laienspiel-bordeaux-dark: #2c0c0a;
  --laienspiel-copper: #9c4d3d;
  --laienspiel-copper-light: #c77c68;
  --laienspiel-grey: #c9c3bd;
  --laienspiel-grey-dark: #4b4744;
  --laienspiel-paper: #f8f5f2;
  --laienspiel-white: #fff;
  --laienspiel-text: #292524;
  --laienspiel-border: #b8aea7;
  --laienspiel-panel-width: 20rem;
  --laienspiel-speed: 400ms;
  --laienspiel-control-height: 3rem;
  --laienspiel-header-top: 1rem;
  --laienspiel-header-gap: 1rem;
  --laienspiel-logo-ratio: 4.8091;
  --laienspiel-stage-grey-start: 58.8vw;
  --cassiopeia-color-primary: var(--laienspiel-bordeaux);
  --cassiopeia-color-hover: var(--laienspiel-copper);
  --link-color: var(--laienspiel-bordeaux);
  --link-color-rgb: 74, 23, 20;
  --body-color: var(--laienspiel-text);
  --body-bg: var(--laienspiel-grey);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: hidden; }

/* Hintergrundbild auf allen Seiten über die gesamte Fensterbreite. */
body.site,
body.site.laienspiel-home {
  color: var(--laienspiel-text);
  background-color: var(--laienspiel-grey) !important;
  background-image:
    linear-gradient(rgb(25 5 4 / 5%), rgb(25 5 4 / 8%)),
    url("../images/laienspieler_websiteTitel_3.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100vw auto !important;
  background-attachment: scroll !important;
}

/* Beitragsseiten beginnen direkt unter Logo und Hamburger. */
body.site:not(.laienspiel-home) .site-grid { padding-top: 5.25rem !important; }

/* Heimseiteninhalt beginnt im grauen Bühnenbereich. */
body.site.laienspiel-home .site-grid {
  position: relative;
  isolation: isolate;
  padding-top: max(5.25rem, var(--laienspiel-stage-grey-start)) !important;
}

/* Allgemeiner Inhaltsblock auf Beitragsseiten. */
.container-component {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  padding: clamp(1rem, 3vw, 2.25rem) !important;
  color: var(--laienspiel-text);
  background: rgb(248 245 242 / 88%) !important;
  border: 1px solid rgb(184 174 167 / 85%);
  border-radius: .55rem;
  box-shadow: 0 .45rem 1.8rem rgb(44 12 10 / 20%);
}

/* Heimseitencontainer selbst bleibt transparent, damit keine senkrechte Kante entsteht. */
body.site.laienspiel-home .container-component {
  width: calc(100vw - 2rem) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-top: clamp(1rem, 2.5vw, 2rem) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Vollbreiter Übergang verdeckt die horizontale Bildkante um zwei Pixel. */
body.site.laienspiel-home .site-grid::before {
  position: absolute;
  top: calc(max(5.25rem, var(--laienspiel-stage-grey-start)) - 2px);
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 6rem;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(201 195 189 / 0%) 0,
    rgb(201 195 189 / 38%) 1.25rem,
    rgb(201 195 189 / 78%) 3.25rem,
    rgb(201 195 189 / 100%) 6rem
  );
  transform: translateX(-50%);
}

.site-grid,
.container-component main,
.blog, .blog-featured, .com-content-article, .blog-item, .item-content {
  background-color: transparent;
}

/* Typografie und Joomla-Bedienelemente. */
a { color: var(--laienspiel-bordeaux); }
a:hover, a:focus { color: var(--laienspiel-copper); }
h1, h2, h3, h4, h5, h6, .item-title a { color: var(--laienspiel-bordeaux-dark); }

.form-control, .form-select, .choices__inner {
  color: var(--laienspiel-text);
  background: var(--laienspiel-paper);
  border-color: var(--laienspiel-border);
}
.form-control:focus, .form-select:focus, .choices.is-focused .choices__inner {
  border-color: var(--laienspiel-copper);
  box-shadow: 0 0 0 .2rem rgb(156 77 61 / 25%);
}
.btn-primary {
  color: var(--laienspiel-white);
  background: var(--laienspiel-bordeaux);
  border-color: var(--laienspiel-bordeaux);
}
.btn-primary:hover, .btn-primary:focus {
  color: var(--laienspiel-white);
  background: var(--laienspiel-copper);
  border-color: var(--laienspiel-copper);
}
.btn-secondary, .btn-outline-secondary {
  color: var(--laienspiel-bordeaux-dark);
  background: #e9e4df;
  border-color: var(--laienspiel-border);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  color: var(--laienspiel-white);
  background: var(--laienspiel-grey-dark);
  border-color: var(--laienspiel-grey-dark);
}
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: .2rem solid var(--laienspiel-copper-light) !important;
  outline-offset: .15rem;
  box-shadow: none !important;
}
.pagination .page-link {
  color: var(--laienspiel-bordeaux);
  background: var(--laienspiel-paper);
  border-color: var(--laienspiel-border);
}
.pagination .active > .page-link, .pagination .page-link:hover {
  color: var(--laienspiel-white);
  background: var(--laienspiel-bordeaux);
  border-color: var(--laienspiel-bordeaux);
}
.alert-info { color: var(--laienspiel-text); background: #eee7e1; border-color: var(--laienspiel-copper-light); }
.breadcrumb { padding: .65rem 1rem; background: rgb(248 245 242 / 82%); border-radius: .4rem; }
.table {
  --bs-table-bg: rgb(248 245 242 / 90%);
  --bs-table-striped-bg: rgb(156 77 61 / 8%);
  --bs-table-hover-bg: rgb(156 77 61 / 14%);
  color: var(--laienspiel-text);
  border-color: var(--laienspiel-border);
}

/* Cassiopeia-Kopf belegt keinen Platz. */
.container-header {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  z-index: 2000 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.container-header > :not(.container-nav), .container-header .navbar-brand { display: none !important; }
.container-header .container-nav, .container-header .grid-child,
.container-header nav, .container-header .navbar {
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Offcanvas-Wurzel. */
.laienspiel-offcanvas-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hamburger. */
.laienspiel-menu-toggle {
  position: fixed !important;
  top: var(--laienspiel-header-top) !important;
  left: 1rem !important;
  z-index: 2030 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--laienspiel-control-height) !important;
  height: var(--laienspiel-control-height) !important;
  min-width: var(--laienspiel-control-height) !important;
  min-height: var(--laienspiel-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--laienspiel-white) !important;
  cursor: pointer;
  background: linear-gradient(145deg, var(--laienspiel-copper), var(--laienspiel-bordeaux)) !important;
  border: 1px solid rgb(255 255 255 / 38%) !important;
  border-radius: .3rem !important;
  box-shadow: 0 .3rem 1rem rgb(44 12 10 / 32%);
  transition: opacity 180ms ease, visibility 180ms ease, filter 180ms ease !important;
}
.laienspiel-menu-toggle:hover { filter: brightness(1.15); }
.laienspiel-menu-toggle__icon { display: grid !important; gap: .28rem !important; width: 1.5rem !important; }
.laienspiel-menu-toggle__icon span {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px;
}
.laienspiel-offcanvas-root.is-open .laienspiel-menu-toggle {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Logo: gleich hoch wie der Hamburger und ohne Beschnitt. */
.laienspiel-site-logo {
  position: fixed !important;
  top: var(--laienspiel-header-top) !important;
  left: calc(1rem + var(--laienspiel-control-height) + var(--laienspiel-header-gap)) !important;
  z-index: 1995 !important;
  display: block !important;
  width: calc(var(--laienspiel-control-height) * var(--laienspiel-logo-ratio)) !important;
  max-width: calc(100vw - 6rem) !important;
  height: var(--laienspiel-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #160703;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: .25rem;
  box-shadow: 0 .3rem 1rem rgb(44 12 10 / 28%);
  transition: opacity var(--laienspiel-speed) ease, transform var(--laienspiel-speed) ease;
}
.laienspiel-site-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
.laienspiel-offcanvas-root.is-open .laienspiel-site-logo {
  opacity: 0;
  transform: translateX(1rem);
  pointer-events: none;
}

/* Offcanvas-Panel. */
.laienspiel-offcanvas-panel {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 2020 !important;
  display: flex !important;
  flex-direction: column !important;
  width: var(--laienspiel-panel-width) !important;
  max-width: 86vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--laienspiel-white) !important;
  text-align: left !important;
  visibility: hidden;
  background:
    linear-gradient(rgb(44 12 10 / 91%), rgb(25 6 5 / 96%)),
    url("../images/laienspieler_websiteTitel_3.jpg") center / cover !important;
  border-right: 1px solid rgb(199 124 104 / 58%);
  box-shadow: .7rem 0 2rem rgb(25 6 5 / 45%);
  transform: translate3d(-102%, 0, 0) !important;
  transition: transform var(--laienspiel-speed) cubic-bezier(.22, .61, .36, 1), visibility var(--laienspiel-speed) !important;
}
.laienspiel-offcanvas-root.is-open .laienspiel-offcanvas-panel {
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
.laienspiel-offcanvas-header {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 4.25rem !important;
  padding: .8rem 1rem !important;
  background: rgb(20 4 3 / 35%);
  border-bottom: 1px solid rgb(199 124 104 / 48%);
}
.laienspiel-offcanvas-title { color: var(--laienspiel-white) !important; font-size: 1.2rem !important; font-weight: 600 !important; }
.laienspiel-offcanvas-close {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.laienspiel-offcanvas-close::before, .laienspiel-offcanvas-close::after {
  position: absolute;
  top: 50%; left: 50%;
  width: 1.35rem; height: 2px;
  content: "";
  background: var(--laienspiel-white);
}
.laienspiel-offcanvas-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.laienspiel-offcanvas-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.laienspiel-offcanvas-navigation {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .5rem 0 2rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  text-align: left !important;
  -webkit-overflow-scrolling: touch;
}
.laienspiel-offcanvas-nav, .laienspiel-offcanvas-nav ul, .laienspiel-offcanvas-nav li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--laienspiel-white) !important;
  text-align: left !important;
  list-style: none !important;
}
.laienspiel-offcanvas-nav a,
.laienspiel-offcanvas-nav__text,
.laienspiel-offcanvas-nav__heading {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: .78rem 1.1rem !important;
  color: var(--laienspiel-white) !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-left: .25rem solid transparent !important;
}
.laienspiel-offcanvas-nav__heading { color: #e8c0b6 !important; font-weight: 600 !important; }
.laienspiel-offcanvas-nav a:hover,
.laienspiel-offcanvas-nav a:focus-visible,
.laienspiel-offcanvas-nav .current > a {
  color: var(--laienspiel-white) !important;
  background: rgb(156 77 61 / 72%) !important;
  border-left-color: #f0b19f !important;
}
.laienspiel-offcanvas-nav ul a,
.laienspiel-offcanvas-nav ul .laienspiel-offcanvas-nav__text,
.laienspiel-offcanvas-nav ul .laienspiel-offcanvas-nav__heading {
  padding-left: 2rem !important;
  font-size: .95rem !important;
}

/* Abdunklung hinter dem geöffneten Menü. */
.laienspiel-offcanvas-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2010 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  background: rgb(31 10 9 / 62%) !important;
  backdrop-filter: saturate(.62) brightness(.74);
  -webkit-backdrop-filter: saturate(.62) brightness(.74);
}
.laienspiel-offcanvas-backdrop[hidden] { display: none !important; }

/* Ursprüngliche Modulspalte entfernen. */
.container-sidebar-left, .sidebar-left.card, .sidebar-left .card-body { display: none !important; }
body.has-sidebar-left .site-grid { grid-template-columns: minmax(0, 1fr) !important; }
.site-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-right: clamp(.75rem, 3vw, 2.5rem) !important;
  padding-bottom: clamp(1rem, 3vw, 2.5rem) !important;
  padding-left: clamp(.75rem, 3vw, 2.5rem) !important;
}
body .site-grid {
  transform: perspective(1400px) translate3d(0, 0, 0) rotateY(0) scale(1);
  transform-origin: right center;
  transition: transform var(--laienspiel-speed) cubic-bezier(.22, .61, .36, 1), filter var(--laienspiel-speed) ease;
}
body.laienspiel-menu-open .site-grid {
  transform: perspective(1400px) translate3d(5rem, 0, -4rem) rotateY(-3.5deg) scale(.97);
  filter: brightness(.77) saturate(.72);
}
html.laienspiel-menu-open, body.laienspiel-menu-open { overflow: hidden; }

/* Tablets und Smartphones. */
@media (max-width: 767.98px) {
  :root { --laienspiel-panel-width: 18rem; }
  body.site:not(.laienspiel-home) .site-grid { padding-top: 5.25rem !important; }
  body.site.laienspiel-home .site-grid { padding-top: max(5.25rem, var(--laienspiel-stage-grey-start)) !important; }
  body.site.laienspiel-home .container-component {
    width: calc(100vw - 1.5rem) !important;
    padding-top: 1rem !important;
  }
  body.site.laienspiel-home .site-grid::before {
    height: 3.5rem;
    background: linear-gradient(
      to bottom,
      rgb(201 195 189 / 0%) 0,
      rgb(201 195 189 / 52%) .8rem,
      rgb(201 195 189 / 88%) 2rem,
      rgb(201 195 189 / 100%) 3.5rem
    );
  }
  .site-grid {
    padding-right: .75rem !important;
    padding-bottom: .75rem !important;
    padding-left: .75rem !important;
  }
  .container-component { padding: 1rem !important; border-radius: .35rem; }
  body.laienspiel-menu-open .site-grid {
    transform: perspective(900px) translate3d(2rem, 0, -2rem) rotateY(-2.5deg) scale(.98);
  }
}

@media (max-width: 340px) {
  .laienspiel-site-logo { width: calc(100vw - 6rem) !important; }
}

/* Fallbacks für ältere Browser. */
@supports not (padding-top: max(1px, 2px)) {
  body.site.laienspiel-home .site-grid { padding-top: 58.8vw !important; }
  body.site.laienspiel-home .site-grid::before { top: calc(58.8vw - 2px); }
}
@supports not ((backdrop-filter: brightness(.8)) or (-webkit-backdrop-filter: brightness(.8))) {
  .laienspiel-offcanvas-backdrop { background: rgb(31 10 9 / 72%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .laienspiel-menu-toggle,
  .laienspiel-site-logo,
  .laienspiel-offcanvas-panel,
  body .site-grid { transition: none !important; }
}