:root {

  --scrollbarWidth: 14px;
  --menuWidth: 2300px;
  --menuBackgroundColor: #212b36;
  --menuBorderColor: #d0d0d0;
  --menuHeadBackgroundColor: #ececec;
  --menuActiveBackground: #fff;
  --menuHoverBackground: rgba(255,255,255,0.1);

  --topBackgroundColor: #05b31c;

  --kundenMenuWidth: 300px;

  --fontSizeDefault: 18px;
  --fontSizeH2: 22px;

  --colorInputFocus: #f0fff2;
  --colorInputFocusText: #000;

  --colorKundenHover: #f0fff2;
  --colorKundenAktiv: #05b31c;

  --colorError: #a8071a;
  --colorErrorLight: #f5222d;
  --colorSucess: #237804;
  --colorWarning: #ad6800;
  --colorHighlight: #FFE5C0;
  --colorDone: #dee8de;


  --grey1: #141414;
  --grey2: #262626;
  --grey3: #595959;
  --grey4: #8c8c8c;
  --grey5: #bfbfbf;
  --grey6: #d9d9d9;
  --grey7: #f0f0f0;
  --grey8: #f5f5f5;
  --grey9: #fafafa;
  
  --pink: #ff0084;
}

*			{ hyphens: auto; overscroll-behavior: none; padding: 0; margin: 0; box-sizing: border-box; font-family: "Source Sans 3"; font-weight: 400; font-size: var(--fontSizeDefault); }


body 		{ width: 100%; min-height: 100vh; background: #36454F; color:#EDEFF2; }

header			{ width: 100%; padding: 30px 0;  text-align: center;}
header a        { display: inline-block; margin: 0 auto; }
header .logo	{ width: 450px; height: auto; display: block; margin: 0 auto;}

h1            { width: 100%; font-size: 30px; line-height: 40px; margin: 0 0 10px 0; text-align: center; }
h2            { width: 100%; font-size: 22px; line-height: 28px; margin: 0 0 0 0; text-align: center; }
h3            { width: 100%; font-size: 22px; line-height: 26px; margin: 0 0 10px 0; text-align: left; font-weight: 500; letter-spacing: 0.2px; }
h4            { width: 100%; font-size: 22px; line-height: 26px; margin: 0 0 5px 0; text-align: left; font-weight: 500; letter-spacing: 0.2px; }

a           { color:#fff; text-decoration: underline; }
a:hover     { color: #ff0084;}

hr          { display: block; width: 100px; height: 2px; margin: 40px auto; border-color: var(--pink); }

p             { width: 100%; margin:  0 0 15px 0; padding: 0; line-height: 26px;}
p.last      { margin: 0; }
p.info      { text-align: center; background: var(--pink); padding: 15px; border-radius: 5px;  }

ul          { margin: 0 0 15px 0; }
li          { margin: 0 0 5px 20px; padding: 0;}

main		{ width: 100%; min-height: 80vh; }

footer			{ width: 100%; background: var(--grey2); color:#fff; padding: 20px 0; }
footer .inner	{ gap: 20px; }
footer h2       { text-align: left; font-size: 16px; line-height: 26px; margin: 0; }
footer p        { text-align: left; font-size: 16px; line-height: 26px; }
footer .col		{ width: calc(33.3% - 15px); }
footer .copy	{ width: 100%; text-align: center; padding: 10px 0; }

.inner			{ width: 94%; max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; }

.inner.text h1  { text-align: left; }
.inner.text h2  { text-align: left; margin: 20px 0 10px 0;}
.inner.text h3  { text-align: left; }

.imgTextWrap          { width: 100%; display: flex; flex-wrap: wrap; gap:40px; margin: 0 0 0 0; align-items: center; }
.imgTextWrap .img     { width: calc(33.33% - 20px); }
.imgTextWrap .img img { width: 100%; height: auto; display: block; border-radius: 7px;  }
.imgTextWrap .txt     { width: calc(66.66% - 20px); height: fit-content; }


h2.fw           { width: 100%; background: var(--grey2); border-radius: 7px; margin: 0 0 20px 0; }
.fwWrap         { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin: 0 0 0 0; }
.fw             { width: calc(33.33% - 20px); padding: 15px; background: var(--grey2); border-radius: 7px; }
.fw h4          { text-align: center; border-bottom: 1px solid #fff; width: 100%; margin: 0 0 10px 0; padding: 0 0 10px 0; }
.fw ul          { margin: 0; padding: 0; list-style-type: none; }
.fw ul li       { margin: 0 0 5px 0;}


@media screen and (max-width: 1300px) {
  
  .imgTextWrap          { align-items: flex-start; }
  .imgTextWrap .img     { width: calc(50% - 20px); }
  .imgTextWrap .txt     { width: calc(50% - 20px); }

}


@media screen and (max-width: 1100px) {
  
  .imgTextWrap .img     { width: 100% }
  .imgTextWrap .img img { width: 100%; max-width: 400px; margin: 0 auto; }
  .imgTextWrap .txt     { width: 100% }
  
  .fw           { width: 100%; text-align: center; }
  footer .col	{ width: 100%; text-align: center;  }
  footer p      { text-align: center; }
  footer h2     { text-align: center; }

}