header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
.formbody button {
  --bezier: cubic-bezier(0.22, 0.61, 0.36, 1);
  --edge-light: hsla(0, 0%, 50%, 0.8);
  --text-light: rgba(255, 255, 255, 0.4);
  --back-color: 244.29, 100%;

  cursor: pointer;
  padding: 0.7em 1em;
  border-radius: 0.5em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: bold;

  /* background: linear-gradient(
    140deg,
    hsla(var(--back-color), 16.47%, 1) min(2em, 20%),
    hsla(var(--back-color), 16.47%, 0.6) min(8em, 100%)
  ); */
  background: hsl(224.29, 100%, 16.47%);
  color: hsla(0, 0%, 100%);
  border: 0;
  box-shadow: inset 0.4px 1px 4px var(--edge-light);

  transition: all 0.1s var(--bezier);
}

.formbody button:hover {
  --edge-light: hsla(0, 0%, 50%, 1);
  text-shadow: 0px 0px 10px var(--text-light);
  box-shadow: inset 0.4px 1px 4px var(--edge-light),
    2px 4px 8px hsla(0, 0%, 0%, 0.295);
  transform: scale(1.1);
}

.formbody button:active {
  --text-light: rgba(255, 255, 255, 1);

  background: linear-gradient(
    140deg,
    hsla(var(--back-color), 50%, 1) min(2em, 20%),
    hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
  );
  box-shadow: inset 0.4px 1px 8px var(--edge-light),
    0px 0px 8px hsla(var(--back-color), 50%, 0.6);
  text-shadow: 0px 0px 20px var(--text-light);
  color: hsla(0, 0%, 100%, 1);
  letter-spacing: 0.1em;
  transform: scale(1);
}

.btn {
  min-height: 40px;
  border-radius: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(224.29, 100%, 16.47%);
  padding: .25rem 1rem;
  margin-right: 24px;
  color: #fff;
  margin-bottom: 15px;
}
.btn a, .btn a:hover, .btn a:visited,
.btn:hover {
  color: #fff;
  text-decoration: none;
}
.cta {
  background-color: #e1182e;
}
.cta {
  animation: ctaBreathing 2.8s ease-in-out infinite;
  will-change: transform, box-shadow;
  transform-origin: center;
}

.cta:hover, .cta:focus, .cta:focus .cta {
  animation-play-state: paused;
}


@keyframes ctaBreathing {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 0, 0, 0);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(220, 20, 60, 0.22);
  }
}
/* example
background: hsl(222,76%,10%)
heading:    hsl(222,76%,70%)
text:       hsl(222,76%,90%)

neutral colors
bg-dark      =  90%
bg           =  95%
bg-light     = 100%
border       =  60%
heading      =   5%
text         =  30%
primary      =  50%
primary dark =  80%

primary color: #00237d = hsl(223.2,100%,24.51%)
secondary color: #fff  = hsl(0,0%,100%)
akcent color1: #e1182e = hsl(353.43, 80.72%, 48.82%)
*/

h1,h2,h3,h4,h5,h6 {
  color: hsl(0,0%,5%);
}
a,a:active,a:visited,a:hover,li,p,span {
  color: hsl(0,0%,10%);
}
header {
  background-color: transparent;
  transition: background-color 0.5s ease,box-shadow 0.5s ease,backdrop-filter 0.5s ease;
}
header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
}
.cards > * {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.hero-txt h1,.hero-txt p{
  color: rgb(0,22,84);
}
.hero-txt::before {
  background: linear-gradient(
    to left,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.35) 18%,
    rgb(255 255 255 / 0.58) 45%,
    rgb(255 255 255 / 0.72) 100%
  );
}
.hero-box,#footer .inside,.cards > .content-text {
  background-color: #fff;
}
#footer {
  background-color: rgb(0,22,84);
}
/* examples 
24px - 1.5rem
20px - 1.25rem
18px - 1.125rem
16px - 1rem (base size)
14px - .875rem
12px - .75rem

20px, 18px, 16px, 14px is enough
 h1 ,  h2 ,  p  ,  p secondary
lineheigt 1.4em
*/

html,body {
  font-size: clamp(12px,3vw + .75rem,20px);
}
h1 {
  font-size: 1.25rem;
}
h2 {
  font-size: 1.125rem;
}
h3,h4,h5,h6 {
  font-size: 1rem;
  font-weight: bold;
}
a,a:active,a:hover,a:visited,li,p,span {
	font-size: 1rem;
}
a,a:active,a:hover,a:visited {
  text-decoration: none;
}
html,body,h1,h2,h3,h4,h5,h6,a,a:active,a:hover,a:visited,li,p,span {
	line-height: 1.4;
}
.hero-txt h1 {
  font-size: 1.5rem;
  font-weight: bold;
}
.hero-txt h1, .hero-txt p {
  
}
.hero-box h2 {
  font-size: 1rem;
}
.hero-box p {
  font-size: 0.75rem;
}
.huge-h2 {
  font-size: clamp(1.25rem, 2rem, 32px);
  font-weight: bold;
  text-align: center;
}
.ce_form h1, .ce_form h2 {
  font-size: 1.5rem;
  text-align: center;
}

@media (max-width: 767px) {
  html,body {
    font-size: 14px;
    line-height: 1.4;
  }
}

.ce_form form {
	margin: 0 auto;
	text-align: center;
}
.ce_form input, .ce_form select {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: .5rem;
	box-sizing: border-box;
	display: block;
	padding: .25rem .5rem;
	width: 100%;
}
#main .ce_form input, #main .ce_form select {
	width: clamp(300px, 80vw, 600px);
	padding: .5rem 1rem;
	margin-bottom: .75rem;
}
.ce_form .widget-captcha label {
	display: none;
}

/* flex usually used
.parent = display: flex
          gap: 1rem
          flex-wrap: wrap
.child =  flex: 1 1 auto

for header = flex & justify-content: space-between
*/

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

header .inside {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
header .inside > * {
  flex: 0 0 auto;
}

#logo img {
  max-height: 100px;
}

#phone img {
  max-width: 50px;
}

#phone {
  display: inline-flex;
  align-self: center;
}

#phone figure {
  position: relative;
  top: 8px;
}

@media (max-width: 600) {
  #phone .rte {
    display: none;
  }
}
/* flex usually used
.parent = display: flex
          gap: 1rem
          flex-wrap: wrap
.child =  flex: 1 1 auto

for header = flex & justify-content: space-between

grid usually used
.parent = display: grid
          gap: 1rem
          grid-template-columns: 20% 80%   variant 2 col
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))   variant n col full width
*/
img {
  width: 100%;
  height: auto;
  display: block;
}
.invisible {
  display: none;
}
.w-75p {
  width: 75%;
}
.col-2 .rte, .col-3 .rte, .col-4 .rte {
  padding: 1.25rem;
}
.inside {
  margin: 0 clamp(10px,10vw,200px);
}
.hero {
  position: relative;
  overflow: visible;
}
.hero-img figure,
.hero-img img,
.hero-img-small img,
.hero-img-small figure {
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero-img {
  min-height: 42rem;
  max-height: 60rem;
  margin-left: calc(-1 * clamp(10px, 10vw, 200px));
  margin-right: calc(-1 * clamp(10px, 10vw, 200px));
  overflow: hidden;
}
.hero-img img {
  display: block;
  object-fit: cover;
  object-position: center center;
}
.hero-img-small {
  margin-left: calc(-1 * clamp(10px, 10vw, 200px));
  margin-right: calc(-1 * clamp(10px, 10vw, 200px));
}
.hero-txt, .hero-box {
  position: absolute;
  z-index: 2;
}
.hero-txt {
  bottom: 12rem;
}
.hero-txt::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  bottom: calc((clamp(8rem, 16vh, 13rem) * -1) - 4rem);
  width: 100vw;
  height: 175px;
  transform: translateX(-50%);
}
.hero-box {
  bottom: 0;
}
.media,.content-gallery ul,.cards,.col-2,.col-3,.col-4 {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.cards {
  align-items: stretch;
}
.cards > * {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cards > *:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}
.cards > .content-text {
  display: block;
  overflow: hidden;
  border-radius: 1rem;
}
.cards > .content-text > figure {
  margin: 0;
  aspect-ratio: 1 / 1; /* oder 4 / 3 */
  overflow: hidden;
}
.cards > .content-text figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cards .rte {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}
.cards .content-text {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cards .content-text .rte {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cards .content-text .rte p:has(.btn) {
  margin-top: auto;
}
.cards h2, .cards h3, .cards h4, .cards h5, .cards h6  {
  margin: 0;
  min-height: 2.4em;
}
.cards .rte:has(.btn) {
  padding-bottom: 0;
}
.media--left {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "headline headline"
    "image text";
}
.media--right {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "headline headline"
    "text image";
}
.media--above {
  grid-template-columns: 1fr;
  grid-template-areas:
    "headline"
    "image"
    "text";
}
.media--below {
  grid-template-columns: 1fr;
  grid-template-areas:
    "headline"
    "text"
    "image";
}
.media > h1,.media > h2,.media > h3,.media > h4,.media > h5,.media > h6 {
  grid-area: headline;
}
.media > figure {
  grid-area: image;
}
.media > .rte {
  grid-area: text;
}
.content-gallery--cols-4 ul,.col-4 {
  grid-template-columns: repeat(4, 1fr);
}
.content-gallery--cols-3 ul,.col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.content-gallery--cols-2 ul,.col-2 {
  grid-template-columns: repeat(2, 1fr);
}
.footer-content > .footer-services, .footer-content > .footer-map,
.footer-content > .ce_form, .footer-content .rte {
  padding: 0 1rem 0.5rem;
}
.hero-box, .cards > *, .footer-map img, #footer .inside {
  border-radius: 1rem;
}
.hero-box > * {
  padding: 0 1rem;
}
#footer, #footer-legal {
  padding: 1rem 0;
}
.mod_article > * {
  margin-bottom: 4rem;
}
.benefits li, ol li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 0.9rem;
  line-height: 1.5;
  color: #555;
}
.benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2fbf71, #1f9d57);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(47, 191, 113, 0.25);
}
ol {
  padding-left: 3rem;
}
ol li {
  padding-left: .25rem;
}

@media (max-width: 767px) {
  #phone .rte {
    display: none;
  }
  .content-gallery--cols-4 ul,.col-4,
  .content-gallery--cols-3 ul,.col-3,
  .content-gallery--cols-2 ul,.col-2{
    grid-template-columns: 1fr;
  }
  .media--left,.media--right,.media--above,.media--below {
    grid-template-columns: 1fr;
  }
  .media--left,.media--above {
    grid-template-areas:
    "headline"
    "image"
    "text";
  }
  .media--right,.media--below {
    grid-template-areas:
    "headline"
    "text"
    "image";
  }
  .hero-box {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .content-gallery--cols-4 ul,.col-4{
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-box {
    display: none;
  }
}