*{margin:0;padding:0;}

body	{
	margin:0;
	padding:0;
	font-family:var(--font-body);
	font-size:16px;
	line-height:24px;
  background:var(--color-bg);
  color:var(--color-txt);
	font-weight:400;
	}

p {margin-bottom:20px;}

/* -------------------- Farben -------------------- */
:root{
	--color-bg:#FFFFFF;
	--color-white:#FFFFFF;
	--color-mint:#30c89f;
	--color-dark:#444444;
	--color-light-gray:#f4f5f9;
  --color-taube:#d0d6e5;
	--color-txt:#444444;
	--color-txt-secondary:#555555;   /* Fließtext in Modulen (colm-3, colm-4, teaser) */
	--color-hdl:#222;
	--color-bg-dark:#1B1A19;
  --color-claim:#7ED3D8;
	--color-signal:#39CDE7;
	--color-signal-dark:#1FA6BC;
	--color-signal-tint:#E7F9FC;
	--color-secondary:#574D4A;
	--color-secondary-tint:#EDE8E6;
	--color-ink:#211F1E;
	--color-ink-muted:#6B6260;
	--color-border:#E4E0DE;
	--color-accent-blue:#A2D5FB;      /* border-left, colm-3 */
	--color-teaser-green:#56D036;     /* teaser .left h2 */
	--color-teaser-turquoise:#30C7D5; /* teaser .right h2 */
	--color-teaser-link:#47CCA6;      /* teaser Link-Farbe */
	--shadow-1:0 4px 16px rgba(33,31,30,0.08);
	--shadow-2:0 10px 32px rgba(33,31,30,0.12);
	--font-body:'karlaregular', Arial;

	/* Fontsize-Skala (rem, Basis 16px) */
	--fs-h1-mobile:1.875rem;   /* 30px */
	--fs-h1-desktop:2.5rem;    /* 40px */
	--fs-h2-mobile:1.625rem;   /* 26px */
	--fs-h2-desktop:2.25rem;   /* 36px */
	--fs-h3-mobile:1.3125rem;  /* 21px */
	--fs-h3-desktop:1.875rem;  /* 30px */
	--fs-headline-mobile:1.75rem;  /* 28px – .content-headline */
	--fs-headline-desktop:2.75rem; /* 44px – .content-headline */
	--fs-body-sm:0.95rem;      /* 15.2px – Modul-Fließtext */
  }


a {text-decoration:none; color:rgb(75,125,164);}
a:hover {text-decoration:none; color:#6996c4;}


/* -------------------- Headlines -------------------- */

h1, h2, h3{font-family: 'ralewaybold'; font-style:normal;color:var(--color-hdl); font-weight: bold;}
h1 {font-size:var(--fs-h1-mobile);line-height: 40px;margin:0 0 20px 0;}
h2 {font-size:var(--fs-h2-mobile);line-height: 36px;margin:0 0 20px 0;}
h3 {font-size:var(--fs-h3-mobile);line-height: 30px;margin:0 0 20px 0;}

/* -------------------- Buttons -------------------- */
a.anfrage {
	background:var(--color-mint);
	color:var(--color-white);
	border:2px solid var(--color-mint);
	display: inline-block;
	font-style: normal;
	padding:10px 20px;
	margin:0 0 15px 0;
}
a.anfrage:hover {
	background:var(--color-white);
	color:var(--color-mint);
}
a.link {
	background:var(--color-white);
	color:var(--color-dark);
	border:2px solid var(--color-dark);
	display: inline-block;
	font-style: normal;
	padding:10px 20px;
}
a.link:hover {
	color:var(--color-mint);
	border:2px solid var(--color-mint);
}

/* -------------------- Header -------------------- */
#header {
  background: linear-gradient(-45deg, #fef8ef, 
#e1fbff, 
#ffffff, 
#e8fde7);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  margin-bottom:120px;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* -------------------- Einstieg -------------------- */

.einstieg {margin: 0 20px 50px 20px;}
.einstieg ul {list-style: none;}

/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
.einstieg {margin: 0 auto 120px auto; width: 960px;}
.einstieg .content-text {float:right; width: 480px;}
.einstieg ul {margin:30px 0 0 0;}
.einstieg ul li, .cta ul li {display: inline-block; margin:0 20px 0 0;}
}

/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
h1 {font-size:var(--fs-h1-desktop);line-height: 50px;margin:0 0 30px 0;}
h2 {font-size:var(--fs-h2-desktop);line-height: 47px;margin:0 0 20px 0;}
h3 {font-size:var(--fs-h3-desktop);line-height: 36px;margin:0 0 20px 0;}
.einstieg {margin: 0 auto 120px auto; width: 1100px;}
.einstieg .content-text {float:right; width: 550px;}
}

/* -------------------- Text - Image lang -------------------- */

.ce_rsce_textimage .leftbar{margin:20px;}
.ce_rsce_textimage{margin:0 0 0 0;}
.ce_rsce_textimage .rightbar {line-height: 0;}

/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
  .ce_rsce_textimage {
    margin:0 auto 90px auto;
    display: flex;
    align-items: stretch; /* .first bekommt automatisch die Höhe des Bildes */
    gap: 0%;
  }
  .ce_rsce_textimage .first {
    width:50%;
    display: flex;
    align-items: center; /* vertikale Zentrierung */
  }
  .ce_rsce_textimage .first .leftbar {
    width: 460px;
    margin-left: auto; /* ersetzt float:right */
    text-align: left;
  }
  .ce_rsce_textimage .inside.last { width:50%;}
}

/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
  .ce_rsce_textimage {margin:0 auto 120px auto;}
  .ce_rsce_textimage .first .leftbar {
    width: 510px;
    margin: 0 40px 0 auto;
    text-align: left;
  }
}
/* -------------------- Accordeon -------------------- */

.accordion {margin:0 0 50px 0; background: var(--color-light-gray); padding:50px 0;}
.accordion .content-accordion {margin:0 20px; border-bottom: 1px solid var(--color-light-gray);}
.handorgel__header__button {background: none!important; padding:15px 30px 15px 0!important; font-size: var(--fs-h3-mobile)!important;border-top: 1px solid var(--color-taube);}
.handorgel__content__inner {padding:20px 0!important;}
.handorgel__content {
  border-top: 1px solid var(--color-light-gray)!important;
  background-color: var(--color-light-gray)!important;
}
.handorgel__content ul{
  margin:0 0 20px 30px;
}
.handorgel__header {
	background-image:url(/files/assets/plus.png)!important;
  background-repeat: no-repeat;
  background-position:  right 16px;
}

.handorgel__header--open {
	background-image:url(/files/assets/minus.png)!important;
  background-repeat: no-repeat;
  background-position:  right 16px;
}

/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
.accordion {margin:0 0 120px 0; padding:80px 0;}
.accordion .content-accordion{margin: 0 auto 0 auto!important;  width: 960px;}
.handorgel__content {
  width:800px;
}
}
/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
.accordion .content-accordion{width: 1100px;}
}

/* -------------------- CTA -------------------- */

.cta {margin:0 20px 0 20px; text-align: center; margin-bottom:50px;}

/* Small Desktop (desktop, 768 and up) */
@media (min-width: 768px) {
.cta {width:700px; margin:0 auto 120px auto;}
}

/* -------------------- 2 Columns Text/Bild -------------------- */

.two-columns {margin:0 20px 50px 20px;}
.two-columns .content-image {margin:0 0 30px 0; line-height:0;}
.two-columns ul {margin:0 0 30px 15px;}
.two-columns ul li{margin:0 20px 5px 20px;}

/* Small Desktop (desktop, 768 and up) */
@media (min-width: 750px) {

.two-columns .content-text {float:right; margin: 0 auto 50px auto; width: 48%;}
.two-columns .content-image  {width: 48%; float:left;}

}
/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
.two-columns {margin:0 auto 120px auto; width: 960px;}
.two-columns .content-text {margin: 0 auto 0 auto; width: 48%;}
.two-columns .content-image  {width: 48%;}
}
/* Small Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
.two-columns {margin:0 auto 120px auto; width: 1100px;}
.two-columns .content-text {margin: 0 auto 0 auto; width: 48%;}
.two-columns .content-image  {width: 48%;}
.two-columns .content-text h2{margin:-10px 0 20px 0}
}

/* -------------------- 3 Columns -------------------- */

.mod_article.colm-3.block {
  background: var(--color-light-gray);
  /* volle Breite erzwingen, ohne extra Wrapper: */
  box-shadow: 0 0 0 100vmax var(--color-light-gray);
  clip-path: inset(0 -100vmax);
  padding: 64px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
  margin-bottom:70px;
}

.mod_article.colm-3.block .content-headline {
  grid-column: 1 / -1;
  color: var(--color-hdl);
  font-size: var(--fs-headline-mobile);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.mod_article.colm-3.block .content-text {
  border-left: 5px solid var(--color-accent-blue);
  padding-left: 24px;
}

.mod_article.colm-3.block .content-text .rte h3 {
  color: var(--color-hdl);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
}

.mod_article.colm-3.block .content-text .rte h3 em {
  display: block;
  color: var(--color-accent-blue);
  font-style: normal;
  font-size: var(--fs-headline-mobile);
  font-weight: 700;
}

.mod_article.colm-3.block .content-text .rte p {
  color: var(--color-txt-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  margin: 0;
}

/* Small Desktop (desktop, 768 and up) */
@media (min-width: 768px) {
  .mod_article.colm-3.block {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto 90px auto;
    gap: 48px 40px;
  }
}

/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
  .mod_article.colm-3.block {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 0 auto 90px auto;
    gap: 48px 40px;
  }
}

/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
  .mod_article.colm-3.block {
    max-width: 1100px;
    margin: 0 auto 120px auto;
  }
  .mod_article.colm-3.block .content-headline,
  .mod_article.colm-3.block .content-text .rte h3 em {
    font-size: var(--fs-headline-desktop);
  }
}

/* -------------------- Teaser Boxen -------------------- */

.mod_article.teaser.block {
  padding: 20px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin:0 0 50px 0;
}

.mod_article.teaser.block .content-text {
  background: var(--color-white);
  border: 1px solid rgb(235, 235, 235);
  padding: 50px 30px;
  box-shadow: 0px 0px 5px 3px rgba(235, 235, 235, 0.8);
  -webkit-box-shadow: 0px 0px 5px 3px rgba(235, 235, 235, 0.8);
}

.mod_article.teaser.block .content-text h2 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 24px;
}

.mod_article.teaser.block .left h2 {
  color: var(--color-teaser-green);
}

.mod_article.teaser.block .right h2 {
  color: var(--color-teaser-turquoise);
}

.mod_article.teaser.block .content-text .rte p {
  color: var(--color-txt-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 18px;
}

.mod_article.teaser.block .content-text .rte a {
  margin-bottom: 0;
  color: var(--color-teaser-link);
  font-weight: 600;
}

.mod_article.teaser.block .content-text .rte p strong {
  color: inherit;
  font-weight: 700;
}

/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
  .mod_article.teaser.block {
    grid-template-columns: repeat(2, 1fr);
    max-width: 960px;
    margin: 0 auto 90px auto;
    gap: 40px;
  }
}

/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
  .mod_article.teaser.block {
    max-width: 1100px;
    margin: 0 auto 120px auto;
  }
}

/* -------------------- 4 Columns -------------------- */

.mod_article.colm-4.block {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
  margin-bottom:70px;
}

.mod_article.colm-4.block .content-headline {
  grid-column: 1 / -1;
  color: var(--color-hdl);
  font-size: var(--fs-headline-mobile);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
}

.mod_article.colm-4.block .content-text {
  border: 1px solid var(--color-dark);
  padding: 30px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.mod_article.colm-4.block .content-text:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1;
}

.mod_article.colm-4.block .content-text a{
  color: var(--color-mint);
  margin-top:10px;
  display: inline-block;
}
.mod_article.colm-4.block .content-text h3 {
  color: var(--color-hdl);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
}

.mod_article.colm-4.block .content-text .rte p {
  color: var(--color-txt-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mod_article.colm-4.block .content-text {
    transition: none;
  }
}

/* Small Desktop (desktop, 768 and up) */
@media (min-width: 768px) {
  .mod_article.colm-4.block {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto 90px auto;
    gap: 48px 20px;
  }
}

/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
  .mod_article.colm-4.block {
    grid-template-columns: repeat(2, 1fr);
    max-width: 960px;
    margin: 0 auto 90px auto;
    gap: 48px 20px;
  }
}

/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
  .mod_article.colm-4.block {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: 0 auto 120px auto;
  }
  .mod_article.colm-4.block .content-headline {
    font-size: var(--fs-headline-desktop);
  }
}

/* -------------------- claim -------------------- */
.claim {
  border-top:1px solid #555;
   border-bottom:1px solid #555;
  font-size:var(--fs-h3-mobile); 
  margin:70px 0 50px 0; 
  line-height: 30px;
  text-align: center;
}
.claim p{margin: auto auto;padding:40px;}



/* Small Desktop (desktop, 768 and up) */
@media (min-width: 768px) {
.claim p{margin: auto auto;width: 560px;  padding:50px;}
}
/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
.claim {margin: 0 auto 120px auto;  font-size:var(--fs-h2-mobile); line-height: 40px }
}

/* Small Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
.claim {margin: 0 auto 120px auto; }
}


/* -------------------- Kunden -------------------- */
.kunden {
  margin:0 0 50px 0; 
  text-align: center;
  background-color: var(--color-light-gray);
  padding:50px 20px;
}


/* Small Desktop (desktop, 1024 and up) */
@media (min-width: 1024px) {
  .kunden { margin:0 0 90px 0; padding:90px 0;}  
  .kunden.mod_article.block .content-text{max-width: 960px;margin: 0 auto 0 auto;}
}

/* Desktop (desktop, 1280 and up) */
@media (min-width: 1280px) {
  .kunden { margin:0 0 120px 0; padding:100px 0 90px 0;}  
  .kunden.mod_article.block .content-text{max-width: 1100px;}
}