/* traditionelle-familie-schuetzen.ch — local site stylesheet
   Replaces broken Jimdo CDN layout + web CSS */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --color-bg: #03a2fc;
  --color-nav: #171717;
  --color-nav-text: #81817e;
  --color-nav-hover: #ffffff;
  --color-dropdown: #383c3f;
  --color-content: rgba(246, 246, 246, 0.92);
  --color-sidebar: #383c3f;
  --color-text: #333332;
  --color-accent: #2e566f;
  --color-accent-hover: #5d5d5d;
  --color-white: #ffffff;
  --color-required: #eb433e;
  --max-width: 1080px;
  --font: "Roboto", Helvetica, Arial, sans-serif;
}

/* ── Reset & base ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body,
.body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a:link,
a:visited {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus,
a:active {
  color: var(--color-accent-hover);
}

h1, h2, h3, h4 {
  font-weight: 300;
  margin: 0 0 0.5em;
  line-height: 1.25;
}

h1, .j-website-title-content { font-size: 4rem; }
h2 { font-size: 3.2rem; }
h3 { font-size: 2.4rem; }

b, strong { font-weight: 700; }

.hidden { display: none !important; }

.n,
div.flexmodul {
  padding: 5px;
}

#cc-website-title a { text-decoration: none; }

.cc-m-image-align-1 { text-align: left; }
.cc-m-image-align-2 { text-align: right; }
.cc-m-image-align-3 { text-align: center; }

#content_area > div > div { clear: both; }

.j-m-required { color: var(--color-required); }

/* ── Navigation (shared) ───────────────────────────────────── */
.navigation-colors {
  position: relative;
  width: 100%;
  background: var(--color-nav);
}

.navigation-colors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-colors .j-nav-level-0 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
  padding: 0 0 0 20px;
}

.navigation-colors .j-nav-level-0 > li {
  position: relative;
  display: block;
}

.navigation-colors a,
.navigation-colors a:link,
.navigation-colors a:visited {
  display: block;
  padding: 0 14px;
  color: var(--color-nav-text);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 50px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.navigation-colors a:hover,
.navigation-colors a:focus {
  color: var(--color-nav-hover);
  background: transparent;
}

.navigation-colors .cc-nav-current > a,
.navigation-colors .cc-nav-current > a:link,
.navigation-colors .cc-nav-current > a:visited,
.navigation-colors .cc-nav-parent > a,
.navigation-colors .cc-nav-parent > a:link,
.navigation-colors .cc-nav-parent > a:visited {
  color: var(--color-nav-hover);
  font-weight: 700;
}

.navigation-colors .j-nav-level-1,
.navigation-colors .j-nav-level-2 {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  margin: 0;
  padding: 0;
  background: var(--color-dropdown);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.navigation-colors .j-nav-level-1 li,
.navigation-colors .j-nav-level-2 li {
  display: block;
  width: 100%;
}

.navigation-colors .j-nav-level-1 a,
.navigation-colors .j-nav-level-2 a {
  line-height: 1.4;
  padding: 12px 20px;
  text-transform: none;
  letter-spacing: 0.04em;
}

.navigation-colors .j-nav-has-children:hover > .j-nav-level-1,
.navigation-colors .j-nav-level-1 > li:hover > .j-nav-level-2 {
  display: block;
}

.navigation-colors .j-nav-level-2 {
  left: 100%;
  top: 0;
}

.jmd-nav__toggle-button { display: none; }

/* ── Classic layout (subpages: tpl-*) ──────────────────────── */
.tpl-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.layout-alignment {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 50px;
  position: relative;
  z-index: 5;
}

.tpl-spacing {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 100px 50px 50px;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 50px;
  background: var(--color-content);
}

.content {
  margin: 0;
}

/* ── Responsive layout (index: jtpl-*) ─────────────────────── */
.jtpl-main {
  position: relative;
  min-height: 100vh;
}

.jtpl-background-area {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 0;
}

.jtpl-navigation {
  position: relative;
  z-index: 50;
}

.jtpl-navigation__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.jtpl-section {
  position: relative;
  z-index: 5;
  padding-top: 50px;
}

.jtpl-section-main {
  max-width: var(--max-width);
  margin: 0 auto;
}

.jtpl-header {
  padding: 40px 50px 0;
}

.jtpl-content {
  background: var(--color-content);
  margin: 0 0 0;
}

.jtpl-content__inner {
  padding: 60px 50px 40px;
}

.jtpl-breadcrumbs {
  margin-bottom: 20px;
}

.jtpl-footer {
  background: var(--color-sidebar);
  color: var(--color-white);
}

.jtpl-footer__inner {
  padding: 10px 50px 20px;
}

.jtpl-cart { display: none; }

/* Mobile nav toggle (index) */
.jtpl-mobile-navigation__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jtpl-mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: var(--color-nav);
  z-index: 200;
}

.jtpl-mobile-navigation__label {
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  padding: 14px;
}

.jtpl-mobile-topbar__navicon,
.jtpl-mobile-topbar__navicon::before,
.jtpl-mobile-topbar__navicon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  position: relative;
}

.jtpl-mobile-topbar__navicon::before,
.jtpl-mobile-topbar__navicon::after {
  content: "";
  position: absolute;
  left: 0;
}

.jtpl-mobile-topbar__navicon::before { top: -7px; }
.jtpl-mobile-topbar__navicon::after { top: 7px; }

.jtpl-mobile-navigation {
  display: none;
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  z-index: 199;
}

.jtpl-mobile-navigation .j-nav-level-0 {
  flex-direction: column;
}

.jtpl-mobile-navigation .j-nav-level-1,
.jtpl-mobile-navigation .j-nav-level-2 {
  position: static;
  display: block;
  box-shadow: none;
  padding-left: 16px;
}

/* ── Breadcrumbs ───────────────────────────────────────────── */
.j-nav-variant-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 5px;
  overflow: hidden;
}

.j-nav-variant-breadcrumb ol li {
  float: left;
}

.j-nav-variant-breadcrumb ol a {
  display: block;
  padding: 5px 5px 5px 0;
}

.j-nav-variant-breadcrumb ol a::after {
  content: " \00bb";
  padding-left: 3px;
}

.j-nav-variant-breadcrumb ol li:last-child a::after {
  content: "";
}

/* ── Content modules ─────────────────────────────────────────── */
.j-module {
  margin-bottom: 1.5em;
}

.j-header h3 {
  font-size: 2.4rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1em;
}

.j-text h3.headline {
  font-weight: 300;
}

.content-options a:link,
.content-options a:visited {
  color: var(--color-accent);
}

/* ── Gallery ─────────────────────────────────────────────────── */
.cc-m-gallery-container {
  margin: 1.5em 0;
  overflow: hidden;
}

.cc-m-gallery-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-m-gallery-container li {
  margin: 0;
  padding: 0;
}

.cc-m-gallery-container img {
  display: block;
  width: 100%;
  height: auto;
}

.cc-m-gallery-slider ul li {
  display: none;
}

.cc-m-gallery-slider ul li:first-child {
  display: block;
}

.cc-m-gallery-slider-fullscreen {
  display: none;
}

/* ── Forms ───────────────────────────────────────────────────── */
.cc-m-form label div {
  font-weight: 500;
  margin-bottom: 4px;
}

.cc-m-form input[type="text"],
.cc-m-form input[type="email"],
.cc-m-form input[type="date"],
.cc-m-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.6rem;
  transition: border-color 0.2s;
}

.cc-m-form input:focus,
.cc-m-form textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.cc-m-form input[type="submit"] {
  display: inline-block;
  margin: 15px 0;
  padding: 10px 24px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-white);
  font-family: inherit;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.cc-m-form input[type="submit"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.cc-m-form-note {
  font-size: 1.3rem;
  color: #666;
}

.cc-m-form-view-element {
  margin-bottom: 1em;
}

/* ── Sidebar / footer ────────────────────────────────────────── */
.sidebar-options,
.jtpl-footer.sidebar-options {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 50px;
  background: var(--color-sidebar);
  color: var(--color-white);
  min-height: 120px;
}

.sidebar-options a,
.sidebar-options a:link,
.sidebar-options a:visited,
.jtpl-footer.sidebar-options a {
  color: var(--color-white);
}

.sidebar-options a:hover {
  color: #ccc;
}

.sidebar-options h1,
.sidebar-options h2,
.sidebar-options h3 {
  color: var(--color-white);
}

.j-module.j-facebook {
  margin-bottom: 1.5em;
}

.footer-options {
  padding: 5px 0;
}

#contentfooter {
  font-size: 0.85em;
  overflow: hidden;
  padding: 10px 0;
}

#contentfooter::after {
  content: "";
  display: table;
  clear: both;
}

.j-meta-links {
  padding: 1em 0;
}

.j-admin-links {
  padding: 1em 0;
  font-size: 0.9em;
  opacity: 0.7;
}

span.loggedin { display: none; }
span.loggedout { display: inline; }

/* ── Download links ──────────────────────────────────────────── */
.j-downloadDocument .cc-m-download-link {
  display: inline-block;
  margin: 10px 0;
  padding: 10px 20px;
  background: var(--color-accent);
  color: var(--color-white) !important;
  border: 1px solid var(--color-accent);
}

.j-downloadDocument .cc-m-download-link:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ── Scroll-to-top ───────────────────────────────────────────── */
.cc-FloatingButtonBarContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 500;
}

.cc-FloatingButtonBarContainer-right {
  right: 20px;
  left: auto;
}

.cc-FloatingButtonBarContainer-button-scroll a {
  display: block;
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  text-align: center;
  line-height: 44px;
  font-size: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cc-FloatingButtonBarContainer-button-scroll a::before {
  content: "\2191";
  font-size: 1.8rem;
}

.cc-FloatingButtonBarContainer-button-scroll span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ── Login box (Jimdo CMS — hidden on static mirror) ─────────── */
#loginbox,
#loginbox-darklayer {
  display: none !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .container,
  .tpl-spacing,
  .jtpl-section-main,
  .jtpl-content__inner,
  .sidebar-options,
  .jtpl-footer.sidebar-options {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 767px) {
  .jtpl-navigation,
  .tpl-navigation-wrapper,
  .navigation-alignment .j-nav-level-0 {
    display: none;
  }

  .jtpl-mobile-topbar {
    display: block;
  }

  #jtpl-mobile-navigation__checkbox:checked ~ .jtpl-main .jtpl-mobile-navigation {
    display: block;
  }

  .tpl-topbar .navigation-colors {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tpl-topbar .j-nav-level-0 {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .jtpl-section {
    padding-top: 50px;
  }

  .layout-alignment {
    padding-top: 50px;
  }

  .container {
    padding: 40px 20px;
  }

  .tpl-spacing {
    padding: 80px 20px 30px;
  }

  h1, .j-website-title-content { font-size: 2.8rem; }
  h2 { font-size: 2.4rem; }
  h3 { font-size: 2rem; }

  .j-text h3.headline span[style*="font-size: 36px"],
  .j-text h3.headline span[data-mce-style*="font-size: 36px"] {
    font-size: 24px !important;
  }

  .j-meta-links,
  .j-admin-links {
    float: none;
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .j-meta-links {
    float: left;
    width: 50%;
    padding: 0;
  }

  .j-admin-links {
    float: right;
    width: 50%;
    text-align: right;
    padding: 0;
  }
}