@font-face {
 	font-family: "Roboto";
	src: url("../fonts/Roboto.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
	
:root {
	--site-width: 85%;

	/* Abstände */
	/*--gap: 20px;
	--gap-smal: 12px;
	--gap-big: 46px;*/
	--gap:1.35vw;
	--gap-smal: 0.6vw;
	--gap-big: 2.4vw;

	/* Wellen */
	--size: 90px;
  	--R: calc(var(--size)*1.28);

	/* Farben */
	--white: #ffffff;
	--background-1: #faf6f0;
	--background-silver: #e2dfdc;
	--background-table: #ebebeb;
	--hover-color: #c9b97e;
	--dpsg-red: #b5212a;
	--dpsg-blue: #013056;
	--dpsg-orange: #ec661a;
	--dpsg-green: #08833c;
	--dpsg-yellow: #fecb18;
	--dpsg-BB-bordaux: #943b5b;

	/* Effekte */
	--opacity: 80%;

  /* Grundeinstellungen aller Schriften */
	--font-family: "Roboto";
	--bs-body-font-family: "Roboto";
	--font-family-alternativ: "Arial";

  /* Grundschrift */
  --text-font-size: clamp(1rem, 1rem, 1.2em);
  --text-font-size-small: clamp(0.8125rem, calc(0.8vw - 0.3125rem), 1.25rem);
  --text-font-weight: 100;
  --text-font-weight-bold: 600;
  --text-line-height: 1.700;
  --text-font-color: #616161;

  /* Überschriften */
  --h1-font-size: clamp(1.25rem, 1.3vw, 3.125rem);
  --h2-font-size: clamp(1rem, 1rem, 1.2em);
  --h2-font-color: #212121;

  /* Menü */
  --menu-font-size: clamp(1rem, calc(0.5vw + 0.5rem), 3.125rem);
  --menu-font-weight: 300;
  --menu-font-color: #616161;

  @media (max-width: 1020px) {
	/* Abstände */
	--gap:3vw;
	--gap-smal: 1.5vw;
	--gap-big: 6vw;

	/* Grundschrift */
	--text-font-size: clamp(1rem, 3vw, 3.75rem);
	--text-font-size-small: clamp(0.625rem, 2.4vw, 2.8125rem);
	--text-font-weight: 100;
	--text-font-weight-bold: 600;
	--text-line-height: 1.700;
	--text-font-color: #616161;

	/* Menü */
	--menu-font-size: clamp(1.875rem, calc(3vw + 0.3125rem), 3.125rem);
	--menu-font-size2: clamp(1.875rem, calc(3vw + 0.3125rem), 3.125rem);
	--menu-font-weight: 300;
	--menu-font-color: #616161;
	}
}


@keyframes move {
  from {
  	top:20%;
  	opacity: 0%;
  }
  to {
  	top: 45%;
  	opacity: var(--opacity);
  }
}

@keyframes move2 {
  from {
  	top: 73%;
  	opacity: 0%;
  }
  to {
  	top: calc(45% + 3.5em);
  	opacity: var(--opacity);
  }
}

@media (max-width: 1020px) {
	@keyframes move2 {
	  from {
	  	top: 73%;
	  	opacity: 0%;
	  }
	  to {
	  	top: calc(45% + 3.5em - 2.5vh);
	  	opacity: var(--opacity);
	  }
	}
}


html{
	height: 100%;
	font-family: var(--font-family), var(--font-family-alternativ) !important;
	font-weight: 400 !important;
	font-size: var(--text-font-size) !important;
	letter-spacing: 0.9px !important;
	color: var(--text-font-color) !important;
	background-color: var(--background-1);
	hyphens: auto;
}

body{
	height: 100%;
}

img{
	max-width: 100%;
	height: auto;
	border: 0;
}

strong, b{
	font-weight: 400;
	color: var(--dpsg-red);
}

h1{
	font-size: var(--h1-font-size);
	letter-spacing: 0.13em;
	color: var(--h2-font-color);
	font-weight: var(--text-font-weight-bold) !important;
}

h2, h3{
	font-size: var(--h2-font-size);
	letter-spacing: 0.13em;
	color: var(--h2-font-color);
	font-weight: var(--text-font-weight-bold) !important;
}

u{
	text-decoration: underline;
}

a{
	text-decoration: none;
	color: var(--text-font-color);
}

label{
	white-space: nowrap;
}

input{
	border: 1px solid var(--hover-color);
	padding: var(--gap-smal) var(--gap) var(--gap-smal) var(--gap);
	height: 100%;
	z-index: 0;
}

select{
	border: 1px solid var(--hover-color);
	padding-left: 15px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	height: 44px;
	z-index: 0;
}

textarea{
	border: 1px solid var(--hover-color);
	padding-left: 15px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	height: 22px;
	width: 500px;
	z-index: 0;
}

summery:hover, details > summary:hover{
	cursor: pointer;
}

button[type="submit"]{
	border: 1px solid var(--hover-color);
	padding: var(--gap-smal) var(--gap) var(--gap-smal) var(--gap);
	height: 100%;
	z-index: 0; 
	font-family: var(--font-family);
}

.com-content-article__body a{
	display: flex;
}

.com-content-article__body a::before{
	content: '';
	height: clamp(20px, 1.5vw, 40px);
	width: clamp(20px, 1.5vw, 40px);
	margin-right: 12px;
	background-image: url("../images/follow.webp");
	background-size: clamp(20px, 1.5vw, 40px);
	background-repeat: no-repeat;
	align-self: center;
}

@media (max-width: 1020px) {
	.com-content-article__body a::before{
		height: clamp(40px, 3.5vw, 60px);
		width: clamp(40px, 4.5vw, 60px);
		background-size: clamp(40px, 3.5vw, 60px);
	}	
}

.pg-photoswipe figure > a::before{
	content: unset !important;
	height: unset !important;
	width: unset !important;
	margin-right: unset !important;
	background-image: unset !important;
	background-size: unset !important;
	background-repeat: unset !important;
	align-self: unset !important;
}

.com-content-article__body ul,
.com-content-article__body ol {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;
}

.com-content-article__body li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 0.5em;
    font-size: var(--text-font-size);
    font-weight: var(--text-font-weight);
    line-height: var(--text-line-height);
}

.com-content-article__body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc((1.7em - 15px) / 2); 
    width: 15px;
    height: 15px;
    background: url("../images/li.webp") no-repeat center / contain;
}

.fabrikForm .btn {
	padding: var(--gap-smal) var(--gap) var(--gap-smal) var(--gap);
	background-color: var(--white);
	color: var(--menu-font-color);
	border: 1px solid var(--hover-color);
	font-weight: var(--menu-font-weight);
	Text-transform: uppercase;
	font-size: var(--button-font-size);
}

.fabrikForm .btn-default.fabrik_view:hover{
	background-color: var(--dpsg-green); !important;
	opacity: 100%;
	color: var(--white);
}

.fabrikForm .btn-default.fabrik_edit:hover{
	background-color: var(--dpsg-yellow); !important;
	opacity: 100%;
	color: var(--white);
}

.fabrikForm .btn-default.delete:hover{
	background-color: var(--dpsg-red); !important;
	opacity: 100%;
	color: var(--white);
}

.fabrikForm .btn:hover{
	opacity: var(--opacity);
}

/*--------------------Icons Button--------------------------*/
.fabrik_actions.fabrik_element .btn-default:has(img){
	display: flex;
	gap: var(--gap-smal);
	justify-self: center;
	align-items: center;
	padding: var(--gap-smal) var(--gap-smal) var(--gap-smal) var(--gap-smal);
	max-width: 3%;
}

.fabrik_actions.fabrik_element .btn-default:has(img) .hidden{
	display: none;
}