/* =====================================================================
   Yacht-Club Großenbrode – Nachbau des yoo_nano-Looks für Joomla 6
   Werte stammen aus dem alten Template (Style "ycg", Farbschema navy).
   ===================================================================== */

:root {
  --ycg-text: #444;
  --ycg-link: #48b;
  --ycg-link-hover: #d50;
  --ycg-accent: #36b;
  --ycg-border: #ddd;
  --ycg-page-bg: #eee;
  --ycg-box-bg: #fff;
  --ycg-font: Arial, Helvetica, sans-serif;
}

body.site.ycg {
  margin: 0;
  background: var(--ycg-page-bg);
  font: normal 14px/20px var(--ycg-font);
  color: var(--ycg-text);
}

.ycg a { color: var(--ycg-link); text-decoration: none; }
.ycg a:hover, .ycg a:focus { color: var(--ycg-link-hover); text-decoration: none; }
.ycg em { color: var(--ycg-link-hover); }
.ycg hr { border: 0; border-top: 1px solid var(--ycg-border); margin: 15px 0; }

/* Seitenrahmen und Kästen ------------------------------------------- */
/* body ist bei Cassiopeia ein Flex-Container: ohne width:100% würde der Wrapper nur so breit wie sein Inhalt */
.ycg-wrapper { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
html { scrollbar-gutter: stable; }
.ycg-box { background: var(--ycg-box-bg); border: 1px solid var(--ycg-border); margin: 15px 0; }

/* Kopfbereich ---------------------------------------------------------- */
#ycg-header { padding: 15px; }
#ycg-logo { display: block; color: inherit; }
#ycg-logo p { margin: 0; display: flex; align-items: flex-end; flex-wrap: wrap; }
#ycg-logo img { display: block; max-width: 100%; height: auto; }

#ycg-menubar {
  margin: 1px 0 -5px;
  padding-top: 10px;
  background: url(../images/menubar.png) 0 0 repeat-x;
}
#ycg-menubar ul { list-style: none; margin: 0 -10px; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; }
#ycg-menubar li { margin: 0; padding: 0 10px 11px; position: relative; width: auto; flex: 0 0 auto; display: block; }
#ycg-menubar .jmodedit { position: absolute; right: 0; top: -2px; padding: 0 6px; font-size: 14px; text-transform: none; }
#ycg-headerbar .jmodedit { position: absolute; right: 20px; top: 20px; }
#ycg-header { position: relative; }
#ycg-menubar a, #ycg-menubar .mod-menu__heading, #ycg-menubar span.separator {
  display: block;
  padding: 5px 0;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--ycg-text);
}
#ycg-menubar li.active > a, #ycg-menubar li.current > a,
#ycg-menubar a:hover, #ycg-menubar a:focus { color: var(--ycg-accent); }
#ycg-menubar li ul { display: none; }
#ycg-menubar li:hover > ul, #ycg-menubar li:focus-within > ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 200px;
  margin: 0;
  padding: 5px 0;
  background: var(--ycg-box-bg);
  border: 1px solid var(--ycg-border);
}
#ycg-menubar li li { padding: 0; }
#ycg-menubar li li a { padding: 5px 15px; font-size: 14px; text-transform: none; }

/* Hauptbereich: Menüspalte links, Inhalt rechts ------------------------ */
#ycg-main { display: flex; align-items: stretch; }
#ycg-sidebar { flex: 0 0 245px; width: 245px; border-right: 1px solid var(--ycg-border); }
#ycg-sidebar-right { flex: 0 0 245px; width: 245px; border-left: 1px solid var(--ycg-border); }
#ycg-content { flex: 1 1 auto; min-width: 0; margin: 20px; }

/* Module in der Seitenspalte */
#ycg-sidebar .moduletable, #ycg-sidebar-right .moduletable { padding: 20px; border-top: 1px solid var(--ycg-border); }
#ycg-sidebar .moduletable:first-child, #ycg-sidebar-right .moduletable:first-child { border-top: 0; }
.ycg .moduletable > h3, .ycg .moduletable > h3 a {
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ycg-text);
}

/* Seitenmenü */
#ycg-sidebar ul { list-style: none; margin: 0; padding: 0; }
#ycg-sidebar li { margin: 0; padding: 0; border-top: 1px solid var(--ycg-border); }
#ycg-sidebar li:first-child { border-top: 0; }
#ycg-sidebar li a, #ycg-sidebar li .mod-menu__heading, #ycg-sidebar li span.separator {
  display: block;
  padding: 5px 0;
  color: var(--ycg-text);
  line-height: 20px;
}
#ycg-sidebar li a:hover, #ycg-sidebar li a:focus { color: var(--ycg-link-hover); }
#ycg-sidebar li.active > a, #ycg-sidebar li.current > a { font-weight: 700; }
#ycg-sidebar li img { vertical-align: middle; margin-right: 6px; }
/* Auf-/Zuklapp-Schalter, den Joomla bei Unterpunkten ausgibt */
#ycg-sidebar li.parent { position: relative; }
#ycg-sidebar li.parent > a { padding-right: 28px; }
#ycg-sidebar .mod-menu__toggle-sub {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #999;
  cursor: pointer;
  font-size: 18px;
  line-height: 30px;
}
#ycg-sidebar .mod-menu__toggle-sub .icon-chevron-down::before { content: "\203A"; font-family: inherit; display: inline-block; transition: transform .15s; }
#ycg-sidebar li.parent.active > .mod-menu__toggle-sub .icon-chevron-down::before,
#ycg-sidebar li.parent.current > .mod-menu__toggle-sub .icon-chevron-down::before,
#ycg-sidebar li.parent.ycg-open > .mod-menu__toggle-sub .icon-chevron-down::before { transform: rotate(90deg); }
#ycg-sidebar li.parent.ycg-closed > .mod-menu__toggle-sub .icon-chevron-down::before { transform: none; }
#ycg-sidebar li ul { display: none; margin: 0 0 5px; }
#ycg-sidebar li.parent.ycg-closed > ul { display: none; }
#ycg-sidebar li.active > ul, #ycg-sidebar li.current > ul, #ycg-sidebar li.ycg-open > ul { display: block; }
#ycg-sidebar li li { border-top: 0; }
#ycg-sidebar li li a {
  padding: 3px 0 3px 15px;
  background: url(../images/menu_sidebar_level2.png) 0 50% no-repeat;
}
#ycg-sidebar li li li a { padding-left: 30px; background-position: 15px 50%; }

/* Inhalt ---------------------------------------------------------------- */
#ycg-content h1, #ycg-content .page-header h1, #ycg-content .page-header h2 {
  margin: 0 0 15px;
  font-size: 36px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ycg-text);
}
#ycg-content h2 { font-size: 24px; line-height: 28px; font-weight: 400; margin: 0 0 15px; color: var(--ycg-text); }
/* Beitragstitel in Blog- und Kategorieansichten */
#ycg-content .blog-item .page-header h2, #ycg-content .blog-item .page-header h1,
#ycg-content .blog-featured .page-header h2 { font-size: 26px; line-height: 28px; letter-spacing: -0.5px; }
#ycg-content .page-header h2 a, #ycg-content .page-header h1 a { color: var(--ycg-text); }
#ycg-content .page-header h2 a:hover, #ycg-content .page-header h1 a:hover { color: var(--ycg-accent); }
#ycg-content .com-content-category-blog__navigation, #ycg-content .com-content-category-blog__pagination { margin-top: 15px; }
#ycg-content h3 { font-size: 18px; line-height: 22px; font-weight: 400; margin: 0 0 15px; color: var(--ycg-text); }
#ycg-content h4 { font-size: 16px; line-height: 20px; font-weight: 700; margin: 0 0 15px; }
#ycg-content p, #ycg-content ul, #ycg-content ol, #ycg-content table { margin: 0 0 15px; }
#ycg-content img { max-width: 100%; height: auto; }
#ycg-content .page-header { border: 0; padding: 0; }
#ycg-content .item-page, #ycg-content .blog, #ycg-content .blog-featured { padding: 0; }
#ycg-content .blog-items .blog-item + .blog-item,
#ycg-content .blog-featured .blog-item + .blog-item { border-top: 1px solid var(--ycg-border); padding-top: 15px; margin-top: 15px; }
#ycg-content .article-info { font-size: 12px; color: #888; margin: 0 0 15px; }
#ycg-content .article-info dd { display: inline; margin-right: 10px; }
#ycg-content .icons .btn { background: none; border: 0; color: var(--ycg-link); padding: 0; }
#ycg-content .com-content-article__body::after, #ycg-content .item-page::after { content: ""; display: block; border-top: 1px solid var(--ycg-border); margin-top: 15px; }
#ycg-content .pagination { margin: 15px 0 0; }
#ycg-content .edit-icons { margin: 0 0 15px; }
#ycg-content table { border-collapse: collapse; width: auto; }
#ycg-content table td, #ycg-content table th { padding: 4px 8px; vertical-align: top; }
#ycg-content .table-bordered td, #ycg-content .table-bordered th { border: 1px solid var(--ycg-border); }

/* Formulare (Login, Profil) im alten Stil */
.ycg .form-control { border-radius: 4px; border: 1px solid #ccc; }
.ycg .btn-primary { background: #006dcc; border-color: rgba(0,0,0,.1); border-radius: 4px; }
.ycg .btn-primary:hover { background: #0055a5; }

/* Fußbereich und Kästen unten */
#ycg-bottom-a .moduletable, #ycg-footer .moduletable, #ycg-top-a .moduletable { padding: 20px; }
#ycg-bottom-a .moduletable + .moduletable { border-top: 1px solid var(--ycg-border); }

/* Diashow in Artikeln ({besps}) -------------------------------------- */
.ycg-slideshow { position: relative; display: block; width: 100%; margin: 0 auto 15px; max-width: 100%; overflow: hidden; background: #f4f4f4; }
.ycg-slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s linear; }
.ycg-slideshow img.is-active { opacity: 1; }
.ycg-slideshow__nav { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; z-index: 2; }
.ycg-slideshow__nav button {
  width: 10px; height: 10px; margin: 0 3px; padding: 0; border-radius: 50%;
  border: 1px solid #fff; background: rgba(0,0,0,.35); cursor: pointer;
}
.ycg-slideshow__nav button.is-active { background: #fff; }
.ycg-slideshow__nav .ycg-slideshow__arrow {
  width: 26px; height: 26px; border-radius: 13px; font-size: 20px; line-height: 22px; color: #fff; vertical-align: middle;
}
.ycg-slideshow__counter { display: inline-block; min-width: 60px; margin: 0 4px; padding: 3px 8px; border-radius: 12px; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; line-height: 18px; vertical-align: middle; }
.ycg-slideshow__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px 20px; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; font-size: 12px; text-align: left; }

/* Externe Inhalte, die erst nach Zustimmung im Kasten geladen werden (Zwei-Klick-Lösung) */
.ycg-gated { display: block; width: 100%; min-height: 120px; margin: 0 0 15px; padding: 15px 20px; box-sizing: border-box; background: #f7f7f7; border: 1px dashed var(--ycg-border); color: #555; font-size: 13px; line-height: 18px; }
.ycg-gated--active { padding: 0; border: 0; background: transparent; min-height: 0; }
.ycg-gated__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ycg-text); }
.ycg-gated__text { margin: 0 0 10px; }
.ycg-gated__text a { color: var(--ycg-link); }
.ycg-gated__btn { padding: 5px 14px; border: 1px solid #999; border-radius: 3px; background: #fff; color: var(--ycg-text); font: inherit; cursor: pointer; }
.ycg-gated__btn:hover, .ycg-gated__btn:focus { border-color: var(--ycg-link); color: var(--ycg-link); }
.ycg-gated iframe { border: 0; width: 100%; }

/* Kleine Bildschirme --------------------------------------------------- */
@media (max-width: 1000px) {
  #ycg-main { flex-direction: column; }
  #ycg-sidebar, #ycg-sidebar-right { flex: none; width: auto; border-right: 0; border-left: 0; border-bottom: 1px solid var(--ycg-border); }
  #ycg-sidebar-right { border-top: 1px solid var(--ycg-border); border-bottom: 0; }
  #ycg-content h1 { font-size: 28px; line-height: 30px; }
}
@media (max-width: 600px) {
  .ycg-wrapper { padding: 0 8px; }
  .ycg-box { margin: 8px 0; }
  #ycg-header { padding: 10px; }
  #ycg-logo p img:nth-child(2) { margin-left: 0 !important; margin-top: 10px; }
  #ycg-content { margin: 12px; }
}

/* Druck */
@media print {
  body.site.ycg { background: #fff; }
  #ycg-sidebar, #ycg-menubar { display: none !important; }
  .ycg-box { border: 0; margin: 0; }
}