/************************************
    Projekt: www.kleineseite.de
    Autor:   Ulrich Vollmer
************************************/

*, *::before, *::after { box-sizing: border-box; }
html, body { 
  margin: 0; padding: 0; 
  --turp: #213a68;
  --tur1: #305496;
  --tur2: #4a689e;
  --tur3: #85a4dc;
  --tur4: #c3d3f1;
  --tur5: #eaeff7;
}

body {
      font-family: 'Droid Serif', Georgia, serif;
      font-size:1.1rem;
      color: #000;
      background: #fff;
      line-height: 1.4;
}

@keyframes vonlinks {
    0% { transform: translate(-800px, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes vonrechts {
    0% { transform: translate(1300px, 0); }
  100% { transform: translate(0, 0); }
}
h1.vl { animation-name: vonlinks; animation-duration: 1.5s; }
h2.vr { animation-name: vonrechts; animation-duration: 2s; }

img { max-width: 100%; display: block; }
img.zm { transition: transform 0.3s ease-in-out; }
img.zm:hover {  transform: scale(1.2); }
.bg-tur5 { background: var(--tur5); }
.bg-turp { background: var(--turp); color: #fff; }
.bg-turp p { color: #fff; }

a { color: inherit; }
#oben { position: fixed; bottom: 60px; right: 20px; width: 50px; height: 50px; display: none; text-align: center; background: var(--tur1); z-index: 999; border: 2px solid #fff; border-radius:50%; }
#oben a { color: #fff; text-decoration: none; font-size: 2rem; padding-top: 0; }

/* ? >>> */ p { margin: 0; color: #111; /*max-width: 34rem;*/ line-height: 1.4; overflow-wrap: break-word; }
h1, h2, h3 { font-family: 'Arial Narrow', sans-serif; margin: 0; line-height: 1.1; }
h2 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 500; }
h2.pro { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 500; hyphens: auto; }
h3 { font-size: clamp(1.4rem, 2vw, 1.6rem); font-weight: 500; }
p, li, td { hyphens: auto; }
ul li { list-style-type:square; margin-left:-15px; padding-left:3px; }
.ac { text-align: center; }
.ar { text-align: right; }
p.pfu { display:none; } /* Pfeil nach unten */
    
section { padding: 5.5rem 0; }
section.kl { padding: 3.5rem 0; }
.row { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.col-2 { display: grid; gap: 3rem; }
.col-3 { display: grid; gap: 2rem; }

.btn {
  display: inline-block;
  padding: 1.2rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .5s, color .3s, border-color .3s;
  margin-top: 2.5rem;
  cursor: pointer;
  border: 0;
}
.btn-tur1 { background: #555; color: #fff; }
.btn-tur1:hover { background: #222; }
.btn-white { background: #fff; color: #000; }
.btn-white:hover { background: #e5e5e5; }
 
/* KOPF */
.kopf { position: relative; height: 50%; overflow:hidden; color: #fff; background: var(--tur1) url('../img/bg_head_1.png') 0 0 repeat-x; }
.kopf-content {
  position: absolute;
  z-index: 1; top: 0; left: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: calc(80vh - 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kopf h1 {
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0;
}

/* KOPF KLEIN*/
.kkopf { position: relative; height: 32vh; overflow: hidden; color: #fff; background: var(--tur1) url('../img/bg_head_2.png') 0 0 repeat-x; }
.kkopf-content {
  position: absolute;
  z-index: 1; top:100px; left: 15px; height: auto; 
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kkopf h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.akopf-content {
  position: absolute;
  z-index: 1; top:100px; text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.akopf-content h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.akopf-content img {
  margin:10px  auto;
  width: clamp(300px, 30vw, 400px);
}

.aform { margin: 0 auto; padding:30px; width:100%; max-width:600px; background: var(--tur5) }

/* IDEE */
.idee-liste { display: grid; gap: 1.8rem; }
.idee-pkt { border-bottom: 4px solid var(--tur5); padding-bottom: 1.5rem; }
.idee-pkt p { margin-top: .5rem; }

/* LEISTUNGEN */
.lei-col { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.lei-box { display: block; text-decoration: none; background: var(--tur5); border: 1px solid var(--tur4); padding: 1.25rem; }
.lei-box:hover { background: #f2f2f2; border: 1px solid var(--tur3); }
.lei-box img { margin: 0 auto; width: 40%; max-width:150px; }

/* PROZESSE */
.pro-box { margin:12px 0; padding:15px 10px; border:2px solid var(--tur3); border-radius: 10px; background:transparent; max-width:100% }
.pro-box:hover { background:#fffff1; }

/* FUSS */
.footer { color: #fff; }
.fuss { background-color: var(--tur1); background-image: url(../img/fuss.png); background-position: 0 0; background-size: 100%; background-repeat: repeat-x; }
.footer a, .footer p { color: #f5f5f5; font-size: 1rem; padding: 5px 0; }
.footer h3 { padding-bottom: 10px; }
.footer a:hover { color: #fff; text-decoration: none; }

/* MEDIAQUERIES */
@media (max-width: 920px) {
  .display { font-size: clamp(2rem, 6vw, 3.2rem); }
  .lei-col { gap: 1rem; }
  .price-card { padding: 1.6rem; }
  p.pfu { display:none; }
}
@media (min-width: 768px) { 
  section { padding: 7rem 0; } 
	.col-2 { grid-template-columns: 1fr 1fr; }
	.row { padding: 0 4rem; } 
  .col-3 { grid-template-columns: repeat(3, 1fr); } 
	.kopf-content { padding: 0 4rem; } 
  .lei-col { grid-template-columns: repeat(3, 1fr); }
  p.pfu { display:none; }
}
@media (max-width: 768px) {
  .row { padding: 0 1.5rem; }
  section { padding: 5rem 0; }
  section.kopf { margin-bottom: 0vh; }
  .kopf { position: relative; height: 32vh; overflow: hidden; color: #fff; background: var(--tur3) url('../img/bg_head_2.png') 0 0 repeat-x; }
  .kopf-content {
  position: absolute;
  z-index: 1; top: -100px; left: 15px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kopf h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0;
}
  .col-2, .col-3 { gap: 2.5rem; }
  .kopf-content { padding: 0 1.5rem; }
  .kopf h1 { max-width: 10ch; }
  .lei-col { grid-template-columns: 1fr; }
  .lei-box { padding: 1rem; }
  .stats { gap: 1.8rem; }
  .footer-main { padding: 4rem 1.5rem 2.5rem; }
  p.pfr { display:none; } /* Pfeil nach rechts */
  p.pfu { display:grid; }
}
@media (max-width: 420px) {
 .row { padding: 0 1.2rem; }
 section { padding: 4.2rem 0; }
 section.kopf { margin-bottom: 0; }
  .kopf { position: relative; height: 32vh; overflow: hidden; color: #fff; background: var(--tur3) url('../img/bg_head_2.png') 0 0 repeat-x; }
  .kopf-content {
  position: absolute;
  z-index: 1; top: -140px; left: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kopf h1 {
  font-size: clamp(3rem, 4vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0;
}

  .btn { width: 94%; text-align: center; padding: .95rem 1.2rem; }
  h2 { font-size: clamp(1.7rem, 8vw, 2.35rem); }
  h3 { font-size: clamp(1.1rem, 1.3vw, 1.5rem); }
  p.pfr { display:none; } /* Pfeil nach rechts */
  p.pfu { display:grid; }

}

/***** CSS-Menü *****/
#cssmenu { display: inline-table; width: 100px; z-index: 25; position: relative; top: 0; left: 10px; }
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative; 
  list-style: none;
}
#cssmenu {
  height: 100%;  
  background: transparent;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: var(--tur2);  
  color: #fff;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 66px;
  padding: 0 4px;
  text-decoration: none;
  text-align: center;
}	
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
  padding: 0;
  width: 180px;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
}
#cssmenu > ul > li > a {
  width: 100px;
}
/*#cssmenu > ul > li:hover > a {
  background: var(--blau1);
  color: #fff;
}*/
#cssmenu .has-sub {
  z-index: 100;
}
#cssmenu .has-sub:hover > ul {
  z-index: 110;
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  margin-bottom: -1px;
  text-align: left;
}
#cssmenu .has-sub ul li a {
  background: var(--turp); opacity: 1;
  border-bottom: 2px solid #fff;
  filter: none;
  font-size: 1rem;
  display: block;
  line-height: 120%;
  width: 180px;
  padding: 17px 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: var(--tur1); opacity: 1;
  color: #fff;
  font-weight:bold;
}

/* Formulare */
input { border: 1px solid var(--tur1); color:var(--turp); height:35px; padding:4px; font-size:1.1rem; margin-top:5px; }
input[type="submit"] { padding: 1.2rem 2.5rem; height:60px; }
fieldset, legend { color:var(--turp); }
fieldset { margin-bottom: 20px; padding:10px; border:2px solid var(--tur3); }
textarea { color:var(--turp); padding:4px; font-size:1.1rem; }

/*** FLIP-FLOP-Schalter***/
.toggle input {
	display: none;
}		
.toggle .slider {
	position: relative;
	top: 7px;
	left: 4px;
	display: inline-block;
	cursor: pointer;
	width: 3em;
	height: 1.5em;
	background-color: #e9caca;
	transition: all .3s ease-in-out;
	border-radius: 1em;
}
.toggle .slider:before {
	position: absolute;
	content: "";
	height: 1.1em;
	width: 1.1em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: #fff;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}		
.toggle input:checked + .slider {
	background-color: green;
}		
.toggle input:focus + .slider {
	background-color: green;
	box-shadow: 0 0 1px gray;
}		
.toggle input:checked + .slider:before {
	transform: translateX(1.5em);
}

/*** OPTIONS-Schalter ***/
.opt-buttons input[type="radio"] {
	visibility: hidden;
}
div.opt-buttons input[type="radio"] { cursor: pointer; }
.opt-buttons label {
  height:30px; width:auto;
  background: var(--tur4);
	border: 1px solid var(--tur1);
	border-radius: 6px;
	padding: 15px;
	margin: 0 auto; margin-right:-30px;
  cursor: pointer;
}
.opt-buttons input:checked + label {
	background: var(--tur2);
	color: #fff; 
}

/*** FANCY-input ***/
.fancy {
	margin: .2em 0 .3em 0;
	position: relative;
}
.fancy label {
	position: absolute;
	color: var(--turp);
	background: linear-gradient(#eaeff7, #fff);
	padding: 0 .3em;
	font-size: .8em;
	top: -.6em;
	left: .5em;
}
.fancy label.like-placeholder {
	font-size: 1em;
	top: .5em;
	left: .5em;
}
.fancy input {
	padding: .2em .5em;
}