/* =========================================================
   KERHART – custom.css (CLEAN / CONSOLIDATED)
   - stabiler Header (kein Shrink / kein Springen)
   - saubere Container-Breite
   - Home: Premium-Look (Bühne + Cards + Icons)
   - Kontakt: Premium-Form (Card breiter, Felder kontrolliert)
   - Grav Forms: Honeypot unsichtbar + Notices clean
   ========================================================= */


/* =========================
   GLOBAL BASE
   ========================= */

body{
  background: #f7f8fa;
}

/* verhindert “Jump” durch Scroll-Anchoring */
html{ overflow-anchor: none; }


/* =========================
   HEADER – stabil, kein Shrink
   ========================= */

#header{
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;
  background: #fff !important;
  padding: 6px 0 0 0 !important;
  border-bottom: none !important;
  transform: none !important;
}

/* Headroom/animated Zustände neutralisieren */
#header.headroom,
#header.headroom--not-top,
#header.headroom--pinned,
#header.headroom--unpinned,
body.header-fixed #header,
body.header-animated #header{
  padding: 6px 0 0 0 !important;
  border-bottom: none !important;
  transform: none !important;
}

/* obere blaue Linie */
#header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0, 95, 185, 0.9);
  pointer-events: none;
}

/* untere dünne Trennlinie */
#header::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,0.06);
  pointer-events: none;
}

/* Keine Transitions im Header */
#header, #header *{
  transition: none !important;
  transform: none !important;
}

/* Header Container fix */
#header .container{
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Navbar fix */
#header .navbar{
  height: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

#header .navbar .navbar-section{
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
}


/* =========================
   BRAND (Hybrid Logo)
   ========================= */

.navbar-brand.brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 72px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.brand-mark,
.navbar-brand.brand img{
  display: block !important;
  height: 34px !important;
  width: auto !important;
}

.brand-text{
  display: inline-flex !important;
  flex-direction: column !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  max-width: none !important;
  overflow: visible !important;
}

.brand-name{
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
  color: #1f2937 !important;
}

.brand-sub{
  font-weight: 500 !important;
  font-size: .9rem !important;
  color: #6b7280 !important;
  opacity: .75 !important;
}

/* falls irgendwo “scrolled”-Regeln existieren */
body.scrolled .brand-text,
#header.scrolled .brand-text{
  opacity: 1 !important;
  max-width: none !important;
  overflow: visible !important;
}


/* =========================
   DESKTOP MENU (Dropmenu)
   ========================= */

.dropmenu{
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropmenu > ul{
  display: flex !important;
  align-items: center !important;
  gap: .25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dropmenu > ul > li{
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropmenu > ul > li > a,
.dropmenu > ul > li > span.menu-parent{
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.65rem 0.75rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  color: inherit !important;
  font-weight: 500 !important;
}

.dropmenu > ul > li > a.active,
.dropmenu > ul > li > span.menu-parent.active{
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dropmenu > ul > li.has-children > span.menu-parent::after{
  content: "▾" !important;
  font-size: .85em !important;
  line-height: 1 !important;
  opacity: .8 !important;
  transform: translateY(1px) !important;
  margin-left: .35rem !important;
}

.dropmenu li.has-children > a::before,
.dropmenu li.has-children > a::after,
.dropmenu li.has-children > span::before{
  content: none !important;
}

/* Dropdown */
.dropmenu li ul{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  z-index: 1000;
}

.dropmenu li.has-children:hover > ul{ display: block; }

.dropmenu li ul a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.dropmenu li ul a:hover{
  background: rgba(0,0,0,.04);
}


/* =========================
   PAGE HEADER BAR (Breadcrumb + Titel)
   ========================= */

.page-header{
  background: #f5f7fa;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 1.05rem 0 0.95rem;
  margin: 0;
}

.page-header .container{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.page-header .breadcrumbs{
  font-size: 0.85rem;
  color: rgba(0,0,0,0.60);
  margin: 0 0 .35rem 0;
}

.page-header .breadcrumbs a{
  color: rgba(0,0,0,0.60);
  text-decoration: none;
}

.page-header .breadcrumbs a:hover{ text-decoration: underline; }

.page-header .breadcrumbs .sep{
  margin: 0 .35rem;
  opacity: .6;
}

.page-header .breadcrumbs .current{
  color: rgba(0,0,0,0.85);
  font-weight: 600;
}

.page-header .page-title{
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}


/* =========================
   CONTENT WIDTH + ABSTÄNDE
   ========================= */

#body-wrapper .container{
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Content direkt nach der Bar näher ran */
.page-header + #start #body-wrapper.section{ padding-top: 0.75rem !important; }

/* Doppel-Titel vermeiden */
.page-header + #start #body-wrapper h1:first-of-type{ display: none !important; }

.page-header + #start #content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-header + #start #content > *:first-child{ margin-top: 0 !important; }


/* =========================
   FOOTER
   ========================= */

#footer{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 1.25rem 0;
  background: #fff;
}

#footer p{ opacity: .85; }


/* =========================
   UI BASICS (Buttons)
   ========================= */

.btn{ border-radius: 10px; }

.btn.btn-primary{
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}


/* =========================
   HOME (Kerhart Solutions)
   ========================= */

.ks-hero{
  padding: 4rem 0 3rem;
  border-radius: 0;
  border: none;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
}

.ks-hero .hero-body{
  max-width: 72rem;
  margin: 0 auto;
}

.ks-eyebrow{
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: .6rem;
}

.ks-title{
  margin-bottom: .5rem;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.ks-lead{
  max-width: 58rem;
  line-height: 1.65;
  font-size: 1.08rem;
  opacity: .92;
}

.ks-motto{
  margin-top: .8rem;
  font-size: .95rem;
  opacity: .7;
}

.ks-cta .btn{ margin-right: .4rem; }

.ks-cta .btn:not(.btn-primary){
  border: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}

/* Section title with keyline */
.ks-section-title{
  position: relative;
  padding-top: .25rem;
  margin-top: 1.8rem;
  margin-bottom: .8rem;
}

.ks-section-title:before{
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: .65rem;
  background: rgba(0,0,0,.14);
  border-radius: 2px;
}

/* Cards */
.ks-cards{ margin-top: .25rem; }

.ks-card{
  border-radius: 14px;
  height: 100%;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ks-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 52px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.10);
}

.ks-card.is-primary{
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}

.ks-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.045);
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: .75rem;
  color: currentColor;
}

.ks-icon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ks-list li{ margin-bottom: .35rem; }

.divider, hr{ opacity: .35; }


/* =========================
   GRAV FORMS (global)
   ========================= */

/* Honeypots / Botchecks sicher ausblenden */
.form-field--honeypot,
.form-field.honeypot,
.grav-form .honeypot,
.form-honeybear,
input[name="honeypot"],
textarea[name="honeypot"],
input[name="data[honeypot]"],
.grav-form input[name="data[honeypot]"]{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Notices (Success/Error) – ruhig & premium */
.notices{
  margin: 0 0 1.1rem 0;
}

.notice{
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  color: rgba(0,0,0,.82);
  font-weight: 500;
}

.notice.success{ border-color: rgba(0,0,0,.10); }
.notice.error{ border-color: rgba(0,0,0,.14); }


/* =========================
   CONTACT (template: contact)
   ========================= */

/* Kontaktseite darf breiter sein */
.template-contact #body-wrapper .container{
  max-width: 1120px !important;
}

/* 2-Spalten Layout auf Desktop */
@media (min-width: 841px){
  .template-contact .columns{
    display: flex !important;
    align-items: flex-start !important;
    gap: 2rem !important;
  }
  .template-contact .columns > .column.col-7{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .template-contact .columns > .column.col-5{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Linke Texte: ruhiger */
.template-contact h2{
  margin-top: 0;
  letter-spacing: -0.01em;
}

.template-contact p{
  line-height: 1.7;
  max-width: 42rem;
  color: rgba(0,0,0,.78);
}

/* Anfrage-Card: Premium + nicht künstlich deckeln */
.template-contact .ks-card-cta{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  width: 100% !important;
  max-width: none !important;
}

.template-contact .ks-card-cta .card-body{
  padding: 1.25rem 1.25rem 1.1rem;
}

/* Form: Labels & Inputs */
.template-contact .grav-form label{
  font-weight: 600;
  color: rgba(0,0,0,.72);
  margin-bottom: .35rem;
  background: transparent !important;
}

.template-contact .grav-form .required{
  color: rgba(0,0,0,.45);
  font-weight: 700;
  background: transparent !important;
  padding: 0 !important;
}

/* Inputs allgemein */
.template-contact .grav-form .form-input,
.template-contact .grav-form input[type="text"],
.template-contact .grav-form input[type="email"],
.template-contact .grav-form textarea{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  padding: .65rem .8rem;
  box-shadow: none;
}

.template-contact .grav-form .form-input:focus,
.template-contact .grav-form input:focus,
.template-contact .grav-form textarea:focus{
  outline: none;
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* Name/E-Mail bewusst schmal halten */
.template-contact .grav-form input[type="text"],
.template-contact .grav-form input[type="email"]{
  max-width: 360px;
}

/* Nachricht darf Raum haben */
.template-contact .grav-form textarea{
  width: 100%;
  min-height: 140px;
  resize: vertical;
}

/* Button: wertig, vollbreit */
.template-contact .grav-form button.btn.btn-primary,
.template-contact .grav-form input[type="submit"].btn.btn-primary{
  width: 100%;
  border-radius: 12px;
  padding: .75rem 1rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* Hinweistext */
.template-contact .form-note{
  margin-top: 1rem;
  font-size: .92rem;
  line-height: 1.55;
  opacity: .72;
}

/* Optional: Sticky auf Desktop (dezent) */
@media (min-width: 841px){
  .template-contact .ks-card-cta{
    position: sticky;
    top: 6rem;
  }
}
.ks-li-map,
.ks-li-map-side{
  display: none !important;
}
/* ===== Kontakt: Layout + Breiten FINAL ===== */
@media (min-width: 900px){

  /* Container wieder “normal breit” */
  .template-contact #body-wrapper .container{
    max-width: 1120px !important;
  }

  /* Columns wirklich nebeneinander erzwingen */
  .template-contact .columns{
    display: flex !important;
    align-items: flex-start !important;
    gap: 2.5rem !important;
  }

  /* Text links, Formular rechts */
  .template-contact .columns > .column.col-7{
    flex: 0 0 56% !important;
    max-width: 56% !important;
  }
  .template-contact .columns > .column.col-5{
    flex: 0 0 44% !important;
    max-width: 44% !important;
  }

  /* Card rechts soll die komplette Spalte nutzen */
  .template-contact .ks-card-cta{
    width: 100% !important;
    max-width: none !important;
  }
}

/* Felder: optisch sauber */
.template-contact .grav-form input[type="text"],
.template-contact .grav-form input[type="email"]{
  width: 100% !important;
  max-width: 420px;      /* kompakt, aber nicht zu schmal */
}

.template-contact .grav-form textarea{
  width: 100% !important;
  min-height: 160px;
}
.ks-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  margin: 1rem 0 1.25rem;
}

.ks-badge{
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.78);
  white-space:nowrap;
}

.ks-badge--primary{
  background: rgba(0,95,185,.08);
  border-color: rgba(0,95,185,.22);
  color: rgba(0,95,185,.95);
}