/* mosaik-spechte.eu -- Cassiopeia overrides reproducing the old beez5-based "spechte" template.
   Loaded automatically as user.css. Font + images copied from the old template folder. */

@font-face {
  font-family: 'Titillium Maps';
  src: local('Titillium Maps'), url("../fonts/TitilliumMaps29L002.woff") format("woff"),
       url("../fonts/TitilliumMaps29L002.otf") format("opentype");
  font-display: swap;
}

:root {
  --cassiopeia-color-primary: hsl(84, 61%, 40%);
  --cassiopeia-color-link: #7BA428;
  --cassiopeia-color-hover: #638420;
  --ms-green: #7BA428;
  --ms-box: 1050px;
}

/* ---- page: grey gradient background, white centred box ---- */
body { background: #eee url("../images/header_outer.jpg") repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #333; line-height: 1.6; }
.container-header { background: #fff; width: 100%; max-width: var(--ms-box); box-sizing: border-box; margin: 0 auto; padding: 12px 15px 6px; display: block; }
.container-header .grid-child { padding: 0; }
.container-header .navbar-brand { margin: 0; }
.container-header .navbar-brand img { max-height: 72px; }
.site-grid {
  max-width: var(--ms-box); margin: 0 auto; background: #fff; padding: 0 0 20px;
  grid-gap: 0 1em;
  grid-template-columns: [full-start] 0 [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0 [full-end];
}
.container-footer { width: 100%; max-width: var(--ms-box); box-sizing: border-box; margin: 0 auto; background: #fff; padding: 10px 15px; color: #777; font-size: .9em; display: block; border-top: 1px solid #eee; }
.container-footer .mod-custom p { margin: 0; }
.container-footer .grid-child { padding: 0; }

/* header image: edge to edge inside the box, like #header-image on the old site */
.site-grid .container-banner { grid-column: full-start / full-end; margin: 0 0 8px; background: #eee; }
.container-banner .mod-custom { margin: 0; }
.container-banner img { width: 100%; height: auto; display: block; }

.container-component, .container-sidebar-left { padding: 0 15px; }

/* ---- links ---- */
a, a:link, a:visited { color: var(--ms-green); text-decoration: underline; }
a:hover, a:active, a:focus { background: #669933; color: #fff; text-decoration: none; }
.container-banner a:hover, .ms-gallery a:hover, .navbar-brand:hover { background: transparent; }

/* ---- headings ---- */
h1, h2, h3, h4, .page-header h1, .page-header h2 { font-family: 'Titillium Maps', Arial, sans-serif; font-weight: normal; }
h1, .page-header h1, h2, .page-header h2, .item-title, .blog-item h2 { color: var(--ms-green); font-size: 1.5em; margin: 0 0 10px; }
h2 a, .item-title a, .blog-item h2 a { color: #333; text-decoration: none; }
h3 { font-size: 1.15em; color: #444; margin: 20px 0 8px; }
h4 { font-family: Arial, Helvetica, sans-serif; font-size: 1.05em; font-weight: bold; color: var(--ms-green); margin: 10px 0; }
p { line-height: 1.7; margin: 8px 0; }

/* ---- breadcrumbs: small, plain ---- */
.mod-breadcrumbs, .breadcrumb, .mod-breadcrumbs.breadcrumb.px-3.py-2 { background: none; padding: 6px 0 !important; margin: 0 0 6px; font-size: .9em; color: #555; border-radius: 0; }
.breadcrumb a { color: var(--ms-green); }

/* ---- left menu: no card, module title in Titillium, bullet items with separator lines ---- */
.container-sidebar-left .card { border: 0; border-radius: 0; background: transparent; }
.container-sidebar-left .card-header { background: none; border: 0; padding: 8px 0 4px; font-family: 'Titillium Maps', Arial, sans-serif; font-size: 1.4em; font-weight: normal; color: #444; border-bottom: 1px solid #ddd; }
.container-sidebar-left .card-body { padding: 0; }
.mod-menu, .mod-menu ul { list-style: none; margin: 0; padding: 0; }
.mod-menu > li { border-bottom: 1px solid #ddd; }
.mod-menu li a, .mod-menu li span.separator, .mod-menu li .nav-header {
  display: block; padding: 6px 4px 6px 14px; color: #444; text-decoration: none; line-height: 1.4;
  background: url("../images/arrow_small.png") 3px 12px no-repeat;
}
.mod-menu li a:hover, .mod-menu li a:focus { background-color: #f4f7ec; color: #638420; }
.mod-menu li.active > a, .mod-menu li.current > a, .mod-menu a[aria-current="page"] { font-weight: bold; color: #333; }
.mod-menu li ul { margin-left: 12px; }

/* Sub-items of the active menu item stay open. Joomla's media/mod_menu/js/menu.js
   collapses every submenu on load and only reopens it when the chevron is clicked,
   so landing on "Ueber uns" needed a second click before Team / Warum der Specht? /
   Medienspiegel appeared. Same behaviour as the hamburger menu further down.
   mod-menu.css hides submenus with a zero-specificity :where() rule, so these two
   plain selectors win without !important. js/user.js keeps the ARIA in step. */
.container-sidebar-left .mod-menu ul { display: block; }
.container-sidebar-left .mod-menu__toggle-sub { display: none; }

/* ---- article page ---- */
.item-page, .blog { font-size: 1em; }
.item-content img, .item-page img, .blog img { max-width: 100%; height: auto; }
.caption, span.caption { color: #666; font-size: .9em; }
@media (max-width: 600px) { .item-content div[style*="float"], .item-page div[style*="float"] { float: none !important; margin: .5rem 0 !important; } }

/* ---- galleries converted from the old CSS Gallery plugin ---- */
.ms-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 1rem 0 1.5rem; }
.ms-gallery-item { margin: 0; background: #f4f4f4; overflow: hidden; }
.ms-gallery-item a { display: block; aspect-ratio: 4 / 3; }
.ms-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ms-gallery-item a:hover img { transform: scale(1.04); }
.ms-gallery-item figcaption { padding: .35rem .5rem; font-size: .85em; line-height: 1.3; color: #444; }
.ms-gallery-item figcaption strong { display: block; color: #222; }

/* =====================================================================
   Responsive: hamburger menu (module in "menu" position, collapse layout)
   on small screens, left sidebar menu on desktop.
   ===================================================================== */
.container-header .container-nav { display: none; padding: 0; }
@media (max-width: 991.98px) {
  .container-sidebar-left { display: none; }
  .container-header .container-nav { display: block; }
  .container-nav .navbar { padding: 0; justify-content: flex-start; }
  .container-nav .navbar-toggler { display: inline-flex !important; align-items: center; gap: .5em; margin: 6px 0; padding: 6px 12px; border: 1px solid #ccc; border-radius: 3px; color: #444; font-size: 1.1em; background: #fff; }
  .container-nav .navbar-toggler::after { content: "Menü"; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
  .container-nav .navbar-collapse { flex-basis: 100%; }
  .container-nav .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }
  .container-nav .mod-menu { flex-direction: column; width: 100%; border-top: 1px solid #ddd; margin-top: 6px; }
  .container-nav .mod-menu > li { border-bottom: 1px solid #ddd; }
  .container-nav .mod-menu li a, .container-nav .mod-menu li span.separator {
    display: block; padding: 10px 6px 10px 16px; color: #444 !important; text-decoration: none; font-size: 15px;
    background: url("../images/arrow_small.png") 4px 17px no-repeat;
  }
  .container-nav .mod-menu li.active > a, .container-nav .mod-menu a[aria-current="page"] { font-weight: bold; color: #333 !important; }
  .container-nav .mod-menu li ul { display: block !important; margin: 0 0 0 14px; }
  .container-nav .mod-menu li ul li a { background-color: #f5f5f5; }
  .container-nav .mod-menu li ul li a, .container-nav .mod-menu li ul li span { color: #444 !important; }
  .container-nav .mod-menu__toggle-sub { display: none; }

  body { font-size: 14px; }
  .container-header { padding: 8px 12px 4px; }
  .container-header .navbar-brand img { max-width: 100%; height: auto; max-height: 60px; }
  .container-component { padding: 0 12px; }
  .site-grid { grid-gap: 0; }
  h1, .page-header h1, h2, .page-header h2 { font-size: 1.4em; }
  .ms-gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
  table { max-width: 100%; }
  iframe { max-width: 100%; }
}
@media (max-width: 575.98px) {
  .ms-gallery { grid-template-columns: repeat(2, 1fr); }
  .container-header .navbar-brand img { max-height: 48px; }
}

/* ---- lightbox (media/templates/site/cassiopeia/js/ms-lightbox.js) ---- */
.ms-lb { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; }
.ms-lb.open { display: flex; }
body.ms-lb-open { overflow: hidden; }
.ms-lb figure { margin: 0; max-width: 94vw; max-height: 94vh; display: flex; flex-direction: column; align-items: center; }
.ms-lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,.6); background: #111; }
.ms-lb figcaption { color: #eee; font-size: 14px; padding: 8px 4px 0; text-align: center; max-width: 94vw; }
.ms-lb button { position: absolute; background: rgba(0,0,0,.35); color: #fff; border: 0; cursor: pointer; font-family: Arial, sans-serif; line-height: 1; }
.ms-lb button:hover { background: rgba(123,164,40,.85); }
.ms-lb-close { top: 10px; right: 12px; font-size: 40px; width: 48px; height: 48px; border-radius: 24px; }
.ms-lb-prev, .ms-lb-next { top: 50%; transform: translateY(-50%); font-size: 56px; width: 52px; height: 90px; border-radius: 6px; }
.ms-lb-prev { left: 8px; } .ms-lb-next { right: 8px; }
@media (max-width: 600px) { .ms-lb-prev, .ms-lb-next { width: 40px; height: 64px; font-size: 40px; } }