/* Custom CSS, Copyright by www.web2use.ch */
/* BKS: Eigene Anpassungen; Helix-Kerndateien bleiben unveraendert. */

/**************************************

            Allgemein

**************************************/

:root {
  --bks-gold: #bc9b5b;
  --bks-gold-dark: #927137;
  --bks-ink: #30302d;
  --bks-muted: #65635e;
  --bks-paper: #ffffff;
  --bks-warm: #f5f3ef;
  --bks-line: #e8e4dc;
}
body { color: var(--bks-ink); background: var(--bks-paper); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4, h5, h6 { color: var(--bks-ink); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
body h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.12; }
body h2 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); line-height: 1.25; }
h3 { font-size: 1.45rem; line-height: 1.3; }
a { color: var(--bks-gold-dark); }
a:hover, a:focus { color: #735727; }
:focus-visible { outline: 3px solid var(--bks-gold-dark); outline-offset: 4px; }
.btn-primary, .sppb-btn-primary, .bks-button { background: var(--bks-gold); border: 1px solid var(--bks-gold); color: #25231e; border-radius: 2px; padding: 12px 22px; font-size: .78rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .sppb-btn-primary:hover, .sppb-btn-primary:focus, .bks-button:hover { background: #735727; border-color: #735727; color: #fff; }


/**************************************

            Header

**************************************/

#sp-header { background: #fff; box-shadow: none; border-bottom: 1px solid var(--bks-line); }
#sp-header.header-sticky { box-shadow: 0 3px 15px rgb(48 48 45 / 6%); }
#sp-header .logo a { color: var(--bks-ink); }
#sp-logo .sp-column { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
#sp-logo .logo { height: auto; line-height: 1.2; }
#sp-logo .logo-slogan { display: block; }
#sp-header .search input { max-width: 160px; font-size: .85rem; }
#sp-logo .logo a { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.05rem, 1.65vw, 1.4rem); line-height: 1.15; }
#sp-logo .logo-slogan { font-family: Arial, Helvetica, sans-serif; font-size: .65rem; letter-spacing: .08em; line-height: 1.6; color: var(--bks-muted); }
#sp-logo .logo a { display: flex; align-items: center; gap: 14px; }
#sp-logo .logo a::after { content: "Britisch Kurzhaar Schweiz"; max-width: 210px; }
#sp-logo .logo-image { height: 80px; width: 120px; object-fit: contain; }


/**************************************

            Topnavigation

**************************************/

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { font-size: .78rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; padding-inline: 12px; }
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li:hover > a { color: var(--bks-gold-dark); }
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { border: 1px solid var(--bks-line); box-shadow: 0 8px 22px rgb(48 48 45 / 7%); }


/**************************************

            Off-Canvas

**************************************/

.offcanvas-menu { background: var(--bks-warm); color: var(--bks-ink); }
.offcanvas-menu .offcanvas-inner ul.menu > li > a { color: var(--bks-ink); }
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a { color: var(--bks-gold-dark); }


/**************************************

            Inhalt

**************************************/

#sp-main-body { padding: clamp(36px, 5vw, 72px) 0; }
#sp-bottom { background: #fff; color: var(--bks-ink); padding: 40px 0; }
#sp-bottom .sp-module-title { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 600; }
.bks-section { padding-block: clamp(36px, 5vw, 72px); }
.bks-section--warm { background: var(--bks-warm); }
.bks-section-intro { max-width: 720px; margin-inline: auto; text-align: center; }
.bks-hero { background: var(--bks-warm); min-height: 420px; }
.bks-hero .sppb-addon-title { max-width: 520px; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.bks-hero p { max-width: 360px; font-size: 1.1rem; }
.bks-hero img { width: 100%; height: auto; object-fit: cover; }
.bks-feature { height: 100%; padding: 20px 24px; text-align: center; }
.bks-feature .sppb-icon, .bks-icon { color: var(--bks-gold); }
.bks-feature h3, .bks-card h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 600; }
.bks-feature p, .bks-card p { color: var(--bks-muted); font-size: .9rem; }
.bks-accent-title::after { content: ''; display: block; width: 48px; height: 2px; background: var(--bks-gold); margin-top: 14px; }
.bks-card { padding: 24px; border-inline-start: 1px solid var(--bks-line); }
.bks-text-link { font-size: .75rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.bks-legal-page .sppb-addon-text-block { max-width: 860px; margin-inline: auto; overflow-wrap: anywhere; }
.bks-legal-page .sppb-addon-text-block h1 { margin-bottom: 32px; }
.bks-legal-page .sppb-addon-text-block h2 { margin-top: 36px; margin-bottom: 18px; }
.bks-legal-page .sppb-addon-text-block h3 { margin-top: 28px; margin-bottom: 14px; }
.bks-legal-page .sppb-addon-text-block p { margin-bottom: 18px; }
/* Startseite nach Screendesign */
.bks-home-page #sp-main-body { padding: 0; }
.bks-home-page #sp-page-builder .sppb-section { padding: 0; }
.bks-home { background: #fff; }
.bks-home .bks-button { display: inline-block; text-decoration: none; margin-top: 14px; }
.bks-home-hero { display: grid; grid-template-columns: 42% 58%; min-height: 430px; background: var(--bks-warm); align-items: stretch; }
.bks-home-hero-copy { padding: 65px 32px 60px 60px; align-self: center; }
.bks-home-hero h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: 20px; }
.bks-home-hero p { font-size: 1.15rem; line-height: 1.5; }
.bks-home-hero img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: 64% center; }
.bks-home-about { padding: 48px 28px 42px; }
.bks-home-about h2 { font-size: 1.8rem; margin-bottom: 18px; }
.bks-home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bks-home-about .bks-home-grid { margin-top: 24px; }
.bks-home .bks-feature + .bks-feature { border-left: 1px solid var(--bks-line); }
.bks-home-icon { display: block; color: var(--bks-gold-dark); font-size: 44px; line-height: 1; margin-bottom: 18px; }
.bks-home-goal { display: grid; grid-template-columns: 48% 52%; background: var(--bks-warm); scroll-margin-top: 110px; }
.bks-home-goal img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.bks-home-goal > div { padding: 44px 46px; align-self: center; }
.bks-home-goal h2 { font-size: 1.8rem; }
.bks-home-goal p { font-size: .94rem; }
.bks-home-links { padding: 40px 18px; }
.bks-home-links .bks-card { display: flex; align-items: flex-start; gap: 15px; padding: 16px 18px; }
.bks-home-links .bks-card:first-child { border-left: 0; }
.bks-home-links .bks-home-icon { font-size: 30px; }
.bks-home-links .bks-text-link { font-size: .68rem; }
.bks-home h3 { margin-bottom: 12px; }


/**************************************

            Randspalte

**************************************/

/* Derzeit keine eigenen Anpassungen. */


/**************************************

            Footer

**************************************/

#sp-footer { background: var(--bks-gold); color: #fff; font-size: .8rem; }
#sp-footer .container-inner { padding: 20px 0; border-top: 0; }
#sp-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#sp-footer a:hover { color: #fff; }
#sp-footer #sp-footer2 .mod-menu { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0; padding: 0; margin: 0; list-style: none; }
#sp-footer #sp-footer2 .mod-menu > li { display: flex; align-items: center; padding: 0; margin: 0; border: 0; line-height: 1.65; }
#sp-footer #sp-footer2 .mod-menu > li + li::before { content: "|"; padding-inline: 12px; opacity: .55; }
#sp-footer #sp-footer2 .mod-menu a { display: inline; padding: 0; }


/**************************************

            Mediaqueries

**************************************/

@media (max-width: 767.98px) {
  #sp-logo .logo a { max-width: 235px; white-space: normal; }
  #sp-logo .logo-slogan { max-width: 235px; font-size: .58rem; }
  #sp-main-body { padding-block: 32px; }
  #sp-footer .container-inner { text-align: center; }
  .bks-hero { min-height: 0; }
  .bks-feature, .bks-card { padding: 20px 16px; border-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .sppb-btn, .sp-megamenu-parent a { transition: none; }
}
@media (max-width: 991.98px) {
 #sp-footer .container-inner { text-align: center; }
 #sp-footer #sp-footer2 .mod-menu { justify-content: center; margin-top: 12px; }
}
@media (max-width: 575.98px) {
 #sp-logo .logo a { gap: 6px; max-width: 255px; }
 #sp-logo .logo a::after { max-width: 145px; font-size: 16px; }
 #sp-logo .logo-image { height: 68px; width: 102px; }
}
@media (max-width: 989px) {
 .bks-home-hero-copy { padding: 40px 25px; }
 .bks-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .bks-home .bks-feature:nth-child(3) { border-left: 0; }
 .bks-home-goal > div { padding: 32px 26px; }
}
@media (max-width: 767px) {
 .bks-home-hero, .bks-home-goal { grid-template-columns: 1fr; }
 .bks-home-hero-copy { padding: 38px 24px; }
 .bks-home-hero img { min-height: 0; height: auto; }
 .bks-home-about { padding: 36px 16px; }
 .bks-home-about br { display: none; }
 .bks-home-goal img { min-height: 0; height: auto; }
 .bks-home-links { padding: 24px 10px; }
}
@media (max-width: 479px) {
 .bks-home-links { grid-template-columns: 1fr; }
 .bks-home-links .bks-card { border: 0; }
 .bks-home .bks-feature { padding: 18px 12px; }
}
