/*--------------------------------------------------------------
# Fonts
# (dieselben lokalen Schriftdateien wie im jacobi22w3-Template
#  koennen unveraendert weiterverwendet werden -> Ordner "fonts"
#  1:1 mit in dieses Template kopieren)
---------------------------------------------------------------*/
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v43-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v43-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v43-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v36-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v36-latin-700.woff2') format('woff2');
}

/*--------------------------------------------------------------
# General / Farb- und Formvariablen
# Blautoene bewusst aus jacobi22w3 uebernommen (Wiedererkennung),
# Radien/Abstaende/Formsprache aber bewusst anders (kein w3-css,
# keine Text-Outline-Optik, keine Schatten-Cards, sondern flache
# Karten mit Akzentlinie und Pillenformen bei Buttons/Badges).
---------------------------------------------------------------*/
:root {
    --a-color: #57719e;
    --a-color-hover: #758db7;
    --a-logo-color: #1a4876;
    --a-dark: #123a5e;
    --a-darker: #0d2c47;
    --a-surface: #f3f6fa;
    --a-border: #dbe3ee;
    --a-text: #465267;
    --a-radius: 14px;
    --a-radius-sm: 8px;
    --a-shadow: 0 10px 30px rgba(18, 58, 94, 0.08);
}

html { scroll-behavior: smooth; }
body {
    background-color: #fff;
    line-height: 1.7;
    color: var(--a-text);
    font-weight: 400;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    overflow-x: hidden;
}
::selection { background: var(--a-dark); color: #fff; }
a { color: var(--a-color); text-decoration: none; transition: .25s all ease; }
a:hover, a:focus { color: var(--a-color-hover); text-decoration: none; outline: none; }
h1, h2, h3, h4, h5 { font-family: "Raleway", sans-serif; color: var(--a-logo-color); }
main.site-main { padding: 50px 0 70px; }
section { padding: 60px 0; }
.btn-primary,
a.btn-primary {
    background: var(--a-logo-color);
    border: 1px solid var(--a-logo-color);
    color: #fff;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    transition: .25s all ease;
}
.btn-primary:hover, a.btn-primary:hover {
    background: var(--a-color);
    border-color: var(--a-color);
    color: #fff;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: var(--a-dark); }
#preloader:before { content: ""; position: fixed; top: calc(50% - 26px); left: calc(50% - 26px); border: 5px solid var(--a-dark); border-top-color: #fff; border-bottom-color: #fff; border-radius: 50%; width: 52px; height: 52px; animation: animate-preloader 1s linear infinite; }
@keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/*--------------------------------------------------------------
# Topbar (schmaler Kontaktbalken oberhalb der Hauptnavigation -
# gibt es im One-Pager jacobi22w3 nicht, sorgt hier fuer eine
# klar andere Kopfzeilen-Silhouette)
--------------------------------------------------------------*/
.topbar { background: var(--a-darker); color: #cfd9e6; font-size: .8rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.topbar-contact { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.topbar-contact li i { color: var(--a-color-hover); margin-right: 6px; }
.topbar-contact a { color: #e7ecf3; }
.topbar-contact a:hover { color: #fff; }
.topbar-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.topbar-social a { color: #cfd9e6; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); }
.topbar-social a:hover { color: #fff; border-color: #fff; }

/*--------------------------------------------------------------
# Hauptnavigation
# Bewusst anders als im One-Pager: nicht transparent/absolut
# ueber einem Teaserbild, sondern von Anfang an weiss/sticky,
# aktiver Link als Pille statt Unterstrich-Slide.
--------------------------------------------------------------*/
.site-header { position: sticky; top: 0; z-index: 999; }
.header_navbar { background: #fff; box-shadow: 0 2px 14px rgba(18, 58, 94, .08); }
.navbar { padding: 14px 0; }
.navbar-brand { display: flex; align-items: center; gap: 10px; padding: 0; }
.navbar-brand .brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--a-logo-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.navbar-brand .brand-text { font-size: 1.3rem; font-weight: 700; color: var(--a-logo-color); font-family: "Raleway", sans-serif; }
@media (max-width: 767px) {
    .navbar-brand .brand-text { font-size: 1.1rem; }
}
#nav.navbar-nav { gap: 4px; }
#nav .nav-item { margin-left: 6px; }
#nav .nav-item .nav-link { font-size: .95rem; font-weight: 600; color: var(--a-text); padding: 8px 18px !important; border-radius: 50px; transition: .25s all ease; }
#nav .nav-item .nav-link:hover { background: var(--a-surface); color: var(--a-logo-color); }
#nav .nav-item .nav-link.active,
#nav .nav-item .nav-link[class*="current"] { background: var(--a-logo-color); color: #fff; }

.navbar-toggler { border: 0; padding: 6px; }
.navbar-toggler:focus { box-shadow: none; }
.menu-nav-icon,
.menu-nav-icon::before,
.menu-nav-icon::after { display: block; width: 26px; height: 2px; background: var(--a-logo-color); position: relative; transition: .3s all ease; }
.menu-nav-icon::before { content: ""; position: absolute; top: -8px; }
.menu-nav-icon::after { content: ""; position: absolute; top: 8px; }

@media (max-width: 991px) {
    #head_menu { padding: 10px 0 16px; }
    #nav .nav-item { margin-left: 0; }
    #nav .nav-item .nav-link { display: block; }
}

/*--------------------------------------------------------------
# Seitenkopf (statt grossem Teaserbild wie im One-Pager: kompakte
# Farbflaeche mit Seitentitel + Wellen-/Keil-Trenner per SVG)
--------------------------------------------------------------*/
.page-header { position: relative; background: linear-gradient(120deg, var(--a-dark), var(--a-logo-color) 60%, var(--a-color)); padding: 46px 0 60px; overflow: hidden; }
.page-header h1 { color: #fff; font-size: 2.1rem; font-weight: 700; margin: 0; }
.page-header-divider { position: absolute; left: 0; bottom: -1px; width: 100%; height: 30px; }
.page-header-divider path { fill: #fff; }
@media (max-width: 767px) {
    .page-header { padding: 32px 0 44px; }
    .page-header h1 { font-size: 1.5rem; }
}

/*--------------------------------------------------------------
# Startseite: dezente Ersatz-Fahne statt Seitenkopf, damit die
# Startseite (ohne page-header) nicht zu abrupt beginnt.
--------------------------------------------------------------*/
body.is-home main.site-main { padding-top: 60px; }

/*--------------------------------------------------------------
# Inhaltsbereich / Sidebar
--------------------------------------------------------------*/
.content-area .main-content { min-width: 0; }
.content-area .main-content img { max-width: 100%; height: auto; border-radius: var(--a-radius-sm); }
.sidebar-content { margin-top: 40px; }
@media (min-width: 992px) {
    .sidebar-content { margin-top: 0; padding-left: 30px; }
}
.sidebar-content > * { background: var(--a-surface); border: 1px solid var(--a-border); border-left: 4px solid var(--a-logo-color); border-radius: var(--a-radius-sm); padding: 20px; margin-bottom: 20px; }

/* generische Karten fuer Leistungsboxen / Teaser innerhalb von Seiteninhalten */
.content-area .card { border: 1px solid var(--a-border); border-left: 4px solid var(--a-color); border-radius: var(--a-radius-sm); box-shadow: none; padding: 6px; margin-bottom: 20px; }
.content-area .card .icon i { color: var(--a-logo-color); font-size: 1.8rem; }

/*--------------------------------------------------------------
# Kontaktformular (Klassen wie gewohnt aus dem contactform-Modul)
--------------------------------------------------------------*/
.contact-section .form-control,
.contact-section .captcha-input input,
.contact-section input:required,
.contactform textarea:required { padding: 14px; margin-bottom: 1rem; background: var(--a-surface); border-radius: var(--a-radius-sm); border: 1px solid var(--a-border); font-size: 1rem; }
.contact-section .form-control:focus,
.contactform .captcha-input input:focus { border-color: var(--a-logo-color); box-shadow: none; outline: 0; }
.contact-section button { background: var(--a-logo-color); border-color: var(--a-logo-color); color: #fff; padding: 12px 32px; border-radius: 50px; font-weight: 600; border: 1px solid; }
.contact-section button:hover { background: var(--a-color); border-color: var(--a-color); }
.contact-section .error { color: #fff; background: #d64545; border-radius: var(--a-radius-sm); padding: 15px; }
.contact-section .success { color: #fff; background: #1f9d63; border-radius: var(--a-radius-sm); padding: 15px; }
.contactform input.missing,
.contactform textarea.missing { border-color: #d64545; }

/*--------------------------------------------------------------
# Impressum / Datenschutz
--------------------------------------------------------------*/
.impressum-section { font-size: 1rem; }
.impressum-section h2 { font-size: 1.25rem; color: var(--a-color); }
.datenschutz-section { font-size: .9rem; }
.datenschutz-section h2 { font-size: 1.2rem; color: var(--a-color); }
.datenschutz-section h3 { font-size: 1rem; color: var(--a-color); }

/*--------------------------------------------------------------
# Cookie-Dialog (Klaro selbst nutzt sein eigenes CSS - dies ist
# nur der Reset-Link im Footer)
--------------------------------------------------------------*/
#cookie-reset-button { color: #f5f9ff; font-size: .875rem; cursor: pointer; }
#cookie-reset-button:hover { color: #fff; text-decoration: underline; }

/*--------------------------------------------------------------
# Footer
# Vier statt drei Spalten, mit runden Icon-Badges - bewusst anders
# aufgebaut als die Drei-Spalten-Fusszeile des One-Pagers.
--------------------------------------------------------------*/
.site-footer { color: #eef2f8; font-size: .875rem; margin-top: 40px; }
.footer-top { padding: 55px 0 30px; background: var(--a-dark); }
.footer-item { text-align: center; margin-bottom: 30px; }
.footer-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 14px; }
.footer-item h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.footer-item p { color: #c7d2e3; margin: 0; }
ul.social-network,
ul.contact-details { padding: 0; margin: 0; list-style: none; }
ul.contact-details li { margin-bottom: 6px; }
ul.contact-details li a { color: #dbe4f1; }
ul.contact-details li a:hover { color: #fff; }
ul.social-network { display: flex; justify-content: center; gap: 10px; }
ul.social-network li a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; }
ul.social-network li a:hover { background: var(--a-color); border-color: var(--a-color); }

.footer-bottom { background: var(--a-darker); color: #c7d2e3; }
.footer-bottom .copyright span { color: #fff; }
.footer-bottom .footer-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.footer-bottom .footer-menu ul li { display: inline-block; padding: 0 12px; position: relative; }
.footer-bottom .footer-menu ul li:not(:last-child)::after { content: ""; position: absolute; right: -1px; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,.25); }
.footer-bottom .footer-menu ul li a { color: #eef2f8; font-size: .9rem; }
.footer-bottom .footer-menu ul li a:hover { color: #fff; }
.footer-bottom .footer-cookie { text-align: right; }
@media (max-width: 991px) {
    .footer-bottom [class*="col-"] { text-align: center; margin-top: 10px; }
    .footer-bottom .footer-cookie { text-align: center; }
}