/* 
2026 blau:#28a1df
dunkelblau:#0D3B55
Orange:#fc9e1b
*/



body {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;  
}

p  {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; 
  font-size:16px;
}

li   {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; 
  font-size:16px;
}





h1,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto Slab', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;  
}

h1 {
 	 font-family: 'Roboto Slab', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 	 font-weight:600;
 	 font-size:3.0em;
	 color:#000000;
}
@media (max-width: 1023px) {
	h1 {
 	 font-size:2.0em;
	}	
}

h2 {
 	 font-family: 'Roboto Slab', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 	 margin-bottom:20px;
 	 font-weight:600;
 	 font-size:2.5em;
	 color:#000000;
}
@media (max-width: 1023px) {
	h2 {
 	 font-size:1.5em;
	}	
}
h3 {
 	 margin-top:40px;
 	 margin-bottom:20px;
 	 font-size:1.6em;
}
@media (max-width: 1023px) {
	h3 {
 	 font-size:1.2em;
	}	
}


.open-sans {
 	 font-family:'open sans' sans-serif;
}

a  {
 	 color:#000000;
}

a:hover  {
 	 color:#6baff3;
}

.handschrift-p {
 	 font-family: 'Juergen';  
 	 font-size:32px;
}
.handschrift-h3 {
 	 font-family: 'Juergen';  
 	 font-size:40px;
}


/* Margin unter Breakpoint seitlich 0px Rand und kein Überstand im Container */
.kasten-weiss {
	background-color:white; 
	padding:15px;
	margin:0px 0px 15px 0px;
	border:0px solid silver;
	border-radius:0px;
}	
/* schaltet über Breakpoint auf 5px seitlich um */
@media (min-width: 992px) {
  .kasten-weiss {
   	margin:5px;
   	border-radius:5px;
  }
}

.kasten-weiss h4 {
	color:black; 
	text-decoration:none;
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.5s; 
	-webkit-transition-timing-function: ease; 
}	
.kasten-weiss h4:hover {
	color:#6baff3; 
	text-decoration:none
}	
.kasten-weiss a {
	color:#6baff3; 
	text-decoration:none;
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.5s; 
	-webkit-transition-timing-function: ease; 
}	
.kasten-weiss a:hover {
	text-decoration:none
}	


.textkasten-start {
	padding:5.0em;
	text-align:left; 
}	
.textkasten-start p {
	 font-size:16px; 
}	

@media (max-width: 1400px) {
	.textkasten-start {
		padding:1.0em;
	}	
	.textkasten-start p {
		 font-size:14px; 
	}	
	.textkasten-start h2 {
		 font-size:2.0em; 
	}	

}



/* Container-fluid oben */

.ganz-oben {
	height:600px;
}
@media (max-width: 1023px) {
	.ganz-oben {
		height:400px;
	}
}

@media (max-width: 780px) {
	.ganz-oben {
		height:300px;
	}
}


/* Bild oben */

.hintergrund1 {
	background: #ffffff url('../bilder/1920-zollverein.jpg') no-repeat center center scroll; 	
	background-size: cover;
}
.hintergrund2 {
	background: #ffffff url('../bilder/strand-3.jpg') no-repeat center center scroll; 	
	background-size: cover;
}
.hintergrund3 {
	background: #ffffff url('../bilder/testhintergrund.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund4 {
	background: #ffffff url('../bilder/1920-bruecke.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund5 {
	background: #ffffff url('../bilder/1920-bluete.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund6 {
	background: #ffffff url('../bilder/1920-zollverein-halb.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund7 {
	background: #ffffff url('../bilder/1920-schilder.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund8 {
	background: #ffffff url('../bilder/1920-schriften.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund9 {
	background: #ffffff url('../bilder/1200-spanien.jpg') no-repeat center center scroll; 
	background-size: cover;
}

.hintergrund-farben {
	background: #ffffff url('../bilder/farben-bunt.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund-toronto {
	background: #ffffff url('../bilder/1200-baum-toronto.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund-toronto-sw {
	background: #ffffff url('../bilder/1200-baum-toronto-sw.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund-lippen {
	background: #ffffff url('../bilder/1200-lippen.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund-lippen-sw {
	background: #ffffff url('../bilder/1200-lippen-sw.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund-fotograf {
	background: #ffffff url('../bilder/fotograf.jpg') no-repeat center center scroll; 
	background-size: cover;
}
.hintergrund-hellblau  {
	background-color:#e9f4ff; background-image: linear-gradient(to right top, #fbe6fe, #f2e9ff, #eaecff, #e4eeff, #e0f0ff);
	
	}
.hintergrund-blau-standard  {
	background-color:#6baff3;
}

.hintergrund-blau 
 {
 background-color:#28a1df;
 background-image: linear-gradient(to right bottom, #76cdff, #69c4f9, #5cbaf3, #4fb1ed, #40a8e7, #38a2e2, #309cdc, #2696d7, #2591d1, #248dca, #2288c4, #2184be);
 	 }
 

	 
.hintergrund-orange 
 {
 background-color:#FC9E1B;
 background-image: linear-gradient(to right bottom, #ffb348, #feaf41, #feab39, #fda731, #fda328, #fa9f23, #f79b1d, #f49717, #ee9214, #e88d11, #e2890d, #dc8409);
  	 }

.hintergrund-braun  {
	background-color:#8f3200
}
.hintergrund-gruen  {
	background-color:#375520; background-image: linear-gradient(to left bottom, #6f874c, #59723b, #455d2b, #31491c, #1e360d);
}
.hintergrund-blauer  {
	background-color:#277dd4
}
.hintergrund-dunkel  {
 background-color:#0D3B55;
 background-image: linear-gradient(to right bottom, #145479, #135174, #124d70, #114a6b, #104767, #0f4361, #0d3e5a, #0c3a54, #0a334b, #082d42, #062639, #052030); 
 
 
}
.hintergrund-dunkel h2 {
	color:#ffffff
}




.hintergrund-schwarz  {
	background-color:#000000;
	background-image: linear-gradient(to right top, #000000, #161616, #252525, #353535, #464646);}


.hintergrund-rot  {
	background-color:#8e000d;
	background-image: linear-gradient(to right top, #8e000d, #9f000c, #b10009, #c20005, #d40000);
	
}
.hintergrund-weiss  {
	background-color:#ffffff;
	background-image: linear-gradient(to left bottom, #ffffff, #f9f9f9, #f3f3f3, #ededed, #e7e7e7);
}
.hintergrund-weiss h2 {
	color:#000000;
}



.hintergrund-gelb  {
	background-color:#ffde00;
}

.hintergrund-test {
	background: #ffffff url('../bilder/850-juergen-scholz.jpg') no-repeat center center scroll; 	
	background-size: cover;
}



.text-weiss {
	color:#ffffff
}



.farbtexte {
	color:#ffffff;
	font-size:1.2em;
	text-align:center;
	padding:20px;
	margin:0px
}
.farbtexte-dunkel {
	color:#444444;
	font-size:1.2em;
	text-align:center;
	padding:20px;
	margin:0px
}



.sieben-hintergrundbild {
	background-image:url('../bilder/7-transparent.png');
	background-position:center center;
	background-repeat:no-repeat;
	background-attachment:scroll	
}

.hintergrund-oben-links {
	background-position:center center;
	background-repeat:no-repeat;
	background-attachment:scroll	
}
.sieben-hintergrundbild1 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild1 {
		background-image:url('../bilder/1920-zollverein.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild2 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild2 {
		background-image:url('../bilder/strand-3.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild3 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild3 {
		background-image:url('../bilder/testhintergrund.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild4 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild4 {
		background-image:url('../bilder/1920-bruecke.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild5 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild5 {
		background-image:url('../bilder/1920-bluete.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild7 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild7 {
		background-image:url('../bilder/1920-schilder.jpg');
		background-size:cover;	
	}
	.sieben-hintergrundbild7 p {
		text-shadow: 2px 2px 4px #000000;	
	}
}
.sieben-hintergrundbild8 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild8 {
		background-image:url('../bilder/1920-schriften.jpg');
		background-size:cover;	
	}
	.sieben-hintergrundbild8 p {
		text-shadow: 2px 2px 4px #000000;	
	}
}
.sieben-hintergrundbild9 {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild9 {
		background-image:url('../bilder/1200-spanien.jpg');
		background-size:cover;	
	}
}

.sieben-hintergrundbild-farben {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-farben {
		background-image:url('../bilder/farben-bunt.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild-toronto {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-toronto {
		background-image:url('../bilder/1200-baum-toronto.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild-toronto-sw {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-toronto-sw {
		background-image:url('../bilder/1200-baum-toronto-sw.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild-lippen {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-lippen {
		background-image:url('../bilder/1200-lippen.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild-lippen-sw {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-lippen-sw {
		background-image:url('../bilder/1200-lippen-sw.jpg');
		background-size:cover;	
	}
}
.sieben-hintergrundbild-fotograf {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-fotograf {
		background-image:url('../bilder/fotograf.jpg');
		background-size:cover;	
	}
}



.sieben-hintergrundbild-test {
	background-image:url('../bilder/7-transparent.png');
}
@media (max-width: 1023px) {
	.sieben-hintergrundbild-test {
		background-image:url('../bilder/850-juergen-scholz.jpg');
		background-size:cover;	
	}
}




/* Text zentriert auf Bild oben */

.text-auf-bild-container {
    margin:50px 20px; 
    text-align: center;
}
@media (max-width: 780px) {
	.text-auf-bild-container {
	    margin:auto; 
	}
}


.text-auf-bild-inhalt {
	padding: 20px;
    margin-top:120px;
	}

@media (max-width: 1023px) {
.text-auf-bild-inhalt {
	padding: 0px;
    margin-top:100px;
	}
}
@media (max-width:860px) {
.text-auf-bild-inhalt {
	padding: 0px;
    margin-top:70px;
	}
}
.text-auf-bild-inhalt h1 {
	color:#ffffff;
	font-size:60px;
	font-weight:600;
  	margin: 40px 0px 0px 0px;
  	padding: 0px;
}
.text-auf-bild-inhalt h2 {
	color:#ffffff;
	font-size:35px;
	font-weight:600;
  	margin: 0px 0px 0px 0px;
  	padding:0px
}
@media (max-width: 1023px) {
	.text-auf-bild-inhalt h1 {
		font-size:40px;
		margin-top:0px
	}	
	.text-auf-bild-inhalt h2 {
		font-size:28px
	}	
}


.text-auf-bild-mono{
	padding: 20px;
    margin-top:120px;
	}

@media (max-width: 1023px) {
.text-auf-bild-mono {
	padding: 0px;
    margin-top:100px;
	}
}
@media (max-width:860px) {
.text-auf-bild-mono {
	padding: 0px;
    margin-top:70px;
	}
}
.text-auf-bild-mono h1 {
	color:#ffffff;
	font-size:80px;
	font-weight:600;
  	margin: 40px 0px 0px 0px;
  	padding: 0px;
}
.text-auf-bild-mono h2 {
	color:#ffffff;
	font-size:45px;
	font-weight:600;
  	margin: 0px 0px 0px 0px;
  	padding:0px
}
@media (max-width: 1023px) {
	.text-auf-bild-mono h1 {
		font-size:50px;
		margin-top:0px
	}	
	.text-auf-bild-mono h2 {
		font-size:28px
	}	
}

.glossary-entry {
      margin-bottom: 2rem;
    }
.glossary-entry    h2 {
      color: #28a1df;
      margin-top: 2rem;
      border-bottom: 1px solid #ddd;
      padding-bottom: 0.5rem;
    }
.glossary-entry    h3 {
      margin-bottom: 0.3rem;
    }

.titeltext {
    font-family: 'Roboto Slab', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;
	font-size:60px;
	font-weight:600;
  	margin: 40px 0px 0px 0px;
  	padding: 0px;
  	line-height:120%
}
.untertiteltext {
    font-family: 'Roboto Slab', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;
	font-size:35px;
	font-weight:600;
  	margin: 0px 0px 0px 0px;
  	padding:0px;
  	line-height:120%
}
@media (max-width: 1023px) {
	.titeltext {
		font-size:40px;
		margin-top:0px
	}	
	.untertiteltext {
		font-size:28px
	}	
}




.gradient-animation-blau-lila  {
	background: #e9f4ff;  
	background: linear-gradient(90deg, #248ffb, #e9f4ff);
    background-size: 600% 600%;

    -webkit-animation: blau-lila 9s ease infinite;
    -moz-animation: blau-lila 9s ease infinite;
    -o-animation: blau-lila 9s ease infinite;
    animation: blau-lila 9s ease infinite;
}

@-webkit-keyframes blau-lila {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes blau-lila {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-o-keyframes blau-lila {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes blau-lila {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}

.gradient-animation-grau-schwarz  {
	background: #cdcdcd;  
	background: linear-gradient(92deg, #f2f2f2, #000000);
    background-size: 400% 400%;

    -webkit-animation: grau-schwarz 9s ease infinite;
    -moz-animation: grau-schwarz 9s ease infinite;
    -o-animation: grau-schwarz 9s ease infinite;
    animation: grau-schwarz 9s ease infinite;
}

@-webkit-keyframes grau-schwarz {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes grau-schwarz {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-o-keyframes grau-schwarz {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes grau-schwarz {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}







.blauverlauf-sehr-hell {
	background: #c8dff7;  /* Fallback für alte Browser - hellblau #6baff3  
	background-image: linear-gradient(to right top, #fcc7ff, #eed2ff, #e4dcff, #dfe4ff, #e1ebff, #e3edff, #e5f0fe, #e8f2fe, #e8f2fe, #e8f2fe, #e8f2fe, #e8f2fe); */  
	}

.blauverlauf-hell {
	background: #6baff3;  /* Fallback für alte Browser - hellblau #6baff3  */
 	background-image: linear-gradient(to right top, #d16bd1, #bc7bdd, #a888e4, #9593e7, #869ce5, #81a3e7, #7eaae7, #7eb1e7, #80b9ed, #83c1f3, #86c9f9, #89d1ff);
   }

.blauverlauf-dunkel {
    background: #15293f;  /* Dunkelblau - Fallback für alte Browser */
 background-image: linear-gradient(to right top, #1a2e44, #21374e, #284157, #2f4b61, #37556b);
}
.lila-blauverlauf {
    background: #6baff3;  /* blau - Fallback für alte Browser */
    background-image: linear-gradient(to right top, #b06bd1, #9b80e2, #8792ed, #75a1f2, #6baff3);
}


.schriftverlauf {
	background-image:linear-gradient(to right, #d16ba5, #6baff3);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}


.aufblenden {
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
  animation-duration: 1.3s;
  animation-delay: 0.5s;
}
.aufblenden2 {
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
  animation-duration: 1.3s;
  animation-delay: 1.3s;
}

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.rotiert {
  transition: transform .7s ease-in-out;
}
.rotiert:hover {
  transform: rotate(360deg);
}


.icon {
	width:90px;
	height:90px;
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-timing-function: ease; 
	margin:20px 0px;
}
.icon:hover {
	transform: scale(1.2);
 }

.icon-rotier {
	width:90px;
	height:90px;
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.7s; 
	-webkit-transition-timing-function: ease; 
	margin:20px 0px;
}
.icon-rotier:hover {
  transform: rotate(360deg);
 }

.icon-120 {
	width:120px;
	height:120px;
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-timing-function: ease; 
	margin:20px 0px;
}
.icon-120:hover {
	transform: scale(1.2);
 }


.btn-blau {
  --bs-btn-color:#fff;
  --bs-btn-bg: #28a1df;
  --bs-btn-border-color: #28a1df;
  --bs-btn-hover-color: #28a1df;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #28a1df;
  -webkit-transition-property: all; 
  -webkit-transition-duration: 0.7s; 
  -webkit-transition-timing-function: ease; 
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  font-weight:400;
  border:3px solid #28a1df;  
  border-radius:50px;
  margin-top:10px
}
.btn-grau {
  --bs-btn-color:#fff;
  --bs-btn-bg: #444444;
  --bs-btn-border-color: #444444;
  --bs-btn-hover-color: #444444;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #444444;
  -webkit-transition-property: all; 
  -webkit-transition-duration: 0.7s; 
  -webkit-transition-timing-function: ease; 
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  font-weight:400;
  border:3px solid #222222;  
  border-radius:50px;
  margin-top:10px
}

.btn-weiss {
  --bs-btn-color:#28a1df;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #fff;
  -webkit-transition-property: all; 
  -webkit-transition-duration: 0.7s; 
  -webkit-transition-timing-function: ease; 
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  font-weight:400;
  border:3px solid white;  
  border-radius:50px;
}

.btn-orange {
  --bs-btn-color:#fff;
  --bs-btn-bg: #fc9e1b;
  --bs-btn-border-color: #fc9e1b;
  --bs-btn-hover-color: #fc9e1b;
  --bs-btn-hover-bg:white;
  --bs-btn-hover-border-color:#fc9e1b;
  -webkit-transition-property: all; 
  -webkit-transition-duration: 0.7s; 
  -webkit-transition-timing-function: ease; 
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  font-weight:400;
  border:3px solid #fc9e1b;  
  border-radius:50px;
  margin-top:10px
}

.referenzbilder {
 	margin:20px 0px;
 	}


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  outline: none;
  cursor: pointer;
  padding: 5px;;
  border-radius:5px
}
#myBtn:hover {
  background-color:#000000;  
}

.footer {
    color:white;
	background-color:#E0F5FF; 
 	}
.footer h4 {
    color:#28a1df;
    padding:15px 0px;
 }

.footer p {
    color:black;
 }

.footer a {
    color:black;
 }
.footer a:hover {
    color:#fc9e1b;
 }