html, body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background: linear-gradient(
    180deg,
    #F7FBFF 0%,
    #EEF6FF 28%,
    #F3FAEF 62%,
    #F8FCF4 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  font-family: Poppins, Arial, sans-serif !important;
}

/* ===== Gesamtfläche transparent, damit der Verlauf sichtbar wird ===== */
body,
main,
.site,
.site-content,
.content,
.page,
.page-content,
.zs-body,
.zs-page,
.zs-content,
.zs-site-content,
#content,
#main,
#page,
[class*="content"],
[class*="Content"],
[class*="page"],
[class*="Page"],
[class*="wrapper"],
[class*="Wrapper"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ===== Header weiß und deutlich größer ===== */
header,
.site-header,
.zs-header,
.zs-site-header,
.top-bar,
.zs-topbar,
[class*="header"],
[class*="Header"],
[class*="topbar"],
[class*="Topbar"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ===== Footer weich und neutral ===== */
footer,
.site-footer,
.zs-footer,
.zs-site-footer,
[class*="footer"],
[class*="Footer"] {
  background: rgba(255,255,255,0.65) !important;
  background-color: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(35, 74, 132, 0.08) !important;
}

/* ===== Abschnitte und Container transparent ===== */
section,
.zs-section,
[data-zs-el="section"],
.row,
.zs-row,
.zs-col,
.zs-column,
.container,
[class*="section"],
[class*="Section"],
[class*="row"],
[class*="Row"],
[class*="col"],
[class*="Col"],
[class*="column"],
[class*="Column"],
[class*="container"],
[class*="Container"],
.zs-box,
.zs-textbox,
[class*="box"],
[class*="Box"],
[class*="textbox"],
[class*="TextBox"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ===== Navigation deutlich größer ===== */
header a,
header nav a,
.site-header a,
.zs-header a,
.zs-site-header a,
.top-bar a,
.zs-topbar a,
[class*="header"] a,
[class*="Header"] a,
[class*="nav"] a,
[class*="Nav"] a {
  color: #234A84 !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

header a:hover,
header nav a:hover,
.site-header a:hover,
.zs-header a:hover,
.zs-site-header a:hover,
.top-bar a:hover,
.zs-topbar a:hover {
  color: #99C928 !important;
}

header .active a,
header .current a,
header .selected a,
.zs-header .active a,
.zs-header .current a,
.zs-header .selected a,
.site-header .active a,
.site-header .current a,
.site-header .selected a {
  color: #234A84 !important;
  border-bottom: 3px solid #99C928 !important;
  padding-bottom: 8px !important;
}

/* ===== Überschriften ===== */
h1, h2, h3, h4, h5, h6,
[class*="title"],
[class*="Title"],
[class*="heading"],
[class*="Heading"] {
  color: #234A84 !important;
  font-family: Poppins, Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
}

h1 {
  font-size: 54px !important;
  margin-bottom: 20px !important;
}

h2 {
  font-size: 34px !important;
  margin-bottom: 18px !important;
}

h3 {
  font-size: 24px !important;
}

/* ===== Fließtext ===== */
p,
li,
span,
div {
  color: #56687A !important;
  font-family: Poppins, Arial, sans-serif !important;
}

p {
  font-size: 20px !important;
  line-height: 1.75 !important;
}

li {
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* ===== Buttons ===== */
button,
input[type="submit"],
input[type="button"],
a[class*="button"],
a[class*="btn"],
[class*="button"],
[class*="Button"] {
  background: linear-gradient(90deg, #234A84 0%, #99C928 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px rgba(35, 74, 132, 0.12) !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a[class*="button"]:hover,
a[class*="btn"]:hover,
[class*="button"]:hover,
[class*="Button"]:hover {
  opacity: 0.92;
}

/* ===== Bilder ===== */
img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

/* ===== Optionale weiche Kartenoptik für Inhaltsblöcke ===== */
.zs-box,
.zs-textbox {
  border-radius: 16px !important;
}

/* ===== Logo deutlich größer ===== */
header img,
.site-header img,
.zs-header img,
.zs-site-header img,
[class*="header"] img,
[class*="Header"] img {
  width: 480px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}

/* ===== Menüabstände größer und sauberer ===== */
header li,
header nav li,
.site-header li,
.zs-header li,
.zs-site-header li,
[class*="header"] li,
[class*="Header"] li {
  margin-right: 10px !important;
}

/* ===== Logo und Menü harmonisch positionieren ===== */
header .container,
header .row,
header .wrapper,
.site-header .container,
.site-header .row,
.site-header .wrapper,
.zs-header .container,
.zs-header .row,
.zs-header .wrapper,
[class*="header"] .container,
[class*="header"] .row,
[class*="header"] .wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}

/* ===== Menü etwas näher und besser ausgerichtet ===== */
header nav,
.site-header nav,
.zs-header nav,
[class*="header"] nav,
[class*="Header"] nav {
  margin-left: 0px !important;
}