@charset "UTF-8";

:root {
  --col-text:   #222222;
  --col-a:      #497c9f;
  --col-blue:   #005073;
  --col-red:    #d83713;
  --col-red2:   #c33f1b;
  --col-grey:   #a0a0a0;
  --col-dis:    #cdccc9;
  --col-lbl:    #969696;
  
  --col-btn-bgr: #005073;
  --col-btn-txt: #ffffff;
  --col-btn-hov: #861623;
  
  --col-bgr:    #fefcf5;
  --col-li:     #fefcf5;
  --col-opt:    #a6d4e2;
  --col-opt:    #00dda7;
  --col-opt:    #3f94a5;
  --width:      1200px;
  
  --col-blau1:  #a2c3d7;
  --col-blau2:  #789bb0;
  --col-blau3:  #497c9f;
  --col-blau4:  #1c4668;
  --col-blau5:  #0f243f;
}


div {
  position:             relative;
  float:                left;
  padding:              0px;
  margin:               0px;
}


body {
  display:              grid;
  min-height:           100vh;
  margin:               0 auto;
  font-family:          'Dancing Script', cursive;
  font-family:          'Oswald', sans-serif;
  font-family:          'Libre Franklin', sans-serif;
  background-color:     var(--col-bgr);
  color:                var(--col-text);
  line-height:          1.5;
  background-image:     url("../pics/Karte.jpg");
  background-size:      cover;
  background-attachment: fixed;
	place-content:        center;
}

input, select, textarea {
  display:              block;
  width:                calc(100% - 10px);
  height:               auto;
  padding:              5px;
  font-family:          'Libre Franklin', sans-serif;
  font-weight:          400;
  line-height:          1.3;
  color:                #5b5b5b;
  background-color:     #fff;
  background-clip:      padding-box;
  border:               1px solid #ced4da;
  border-radius:        .25rem;
  transition:           border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

textarea {
  resize:               none;
}



main {
  margin-top:           80px;
  min-height:           calc(100vh - 100px);
}

.container {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  align-items:          center;
  justify-content:      center;
  width:                100%;
  height:               auto;
  margin-right:         auto;
  margin-left:          auto;
}

.content {
  position:             relative;
  float:                left;
  display:              flex;
  flex-wrap:            wrap;
  justify-content:      center;
  padding:              0px;
  width:                100%;
  max-width:            var(--width);
  background-color:     var(--col-li);
  //box-shadow:           0px 10px 20px 0px rgba(0,0,0,0.5);
}

/*
main       {background-color: mediumaquamarine;}
.container {background-color: coral;}
.content   {background-color: cornsilk;}
*/

ul {
  position:             relative;
  float:                left;
  list-style:           none;
  width:                100%;
  margin:               0px;
  padding:              0px;
}

li {
  position:             relative;
  float:                left;
  width:                calc((100% - 120px) / 4);
  height:               auto;
  margin:               15px;
  padding:              0px;
  background-color:     var(--col-li);
}

a {
  color:                var(--col-black);
  text-decoration:      none;
}
a:hover {
  color:                var(--col-red);
  text-decoration:      none;
}


.start-bild {
  position:             relative;
  float:                left;
  width:                100%;
  aspect-ratio:         2 / 1;
  max-width:            var(--width);
  overflow:             hidden;
  min-height:           200px;
}

.start-bild img {
  width:                100%;
  object-fit:           cover;
  object-position:      center center;
}

.start-text1 {
  position:             fixed;
  margin-top:           130px;
  width:                95%;
  max-width:            var(--width);
  max-width:            1200px;
  font-size:            74px;
  font-family:          'Oswald', sans-serif;
  text-transform:       uppercase;
  font-weight:          500;
  color:                var(--col-li);
  margin-left:          40px;
  z-index:              2;
  animation:            left-in 1s;
}
.start-text2 {
  position:             fixed;
  margin-top:           210px;
  width:                100%;
  max-width:            var(--width);
  max-width:            1200px;
  margin-right:         40px;
  font-family:          'Oswald', sans-serif;
  font-size:            74px;;
  text-transform:       uppercase;
  font-weight:          500;
  color:                var(--col-li);
  z-index:              2;
  text-align:           right;
  animation:            right-in 1s;
}



.intro {
  position:             relative;
  float:                left;
  z-index:              3;
  background-color:     var(--col-blue);
}
.intro-bild {
   width:               30%; 
}
.intro-bild img {
  width:                80%;
  padding:              10%;
}
.intro-blau {
  width:                70%;
  color:                var(--col-li);
}
.intro-text {
  width:                calc(100% - 50px);
  padding:              25px;
  font-family:          'Libre Franklin', sans-serif;
  font-weight:          300;
}
@media(max-width:400px) {.intro-text {width: calc(100% - 20px);padding: 10px;font-size: 16px}}

.intro-schrift {
  width:                calc(100% - 225px);
  padding:              25px;
  padding-left:         200px;
  padding-bottom:       50px;
  font-size:            30px;
  font-family:          'Dancing Script', cursive;
  font-weight:          300;
  transform:            rotate(-7deg);
  //background-color:     var(--col-red);
}



/* B U T T O N L E I S T E *********************/

div.btn-leiste, div.btn-leiste-0 {
  position:             relative;
  float:                left;
  width:                100%;
  height:               auto;
  margin-bottom:        10px;
  margin-top:           10px;
}
div.btn-leiste-0 {
  margin-bottom:        5px;
}
button.btn-leiste, 
button.btn-leiste-0,
button.btn-leiste-50-li,
button.btn-leiste-50-re,
button.btn-leiste-absatz-prev,
button.btn-leiste-absatz-save,
button.btn-leiste-absatz-next {
  position:             relative;
  float:                left;
  width:                100%;
  height:               40px;
  margin:               3px 0px 0px 0px;
  padding:              0px;
  background-color:     var(--col-btn-bgr);
  color:                var(--col-btn-txt);
  font-family:          'Oswald', sans-serif;
  font-size:            0.875rem;
  font-weight:          400;
  line-height:          34px;
  letter-spacing:       1px;
  text-transform:       uppercase;
  overflow:             hidden;
  text-overflow:        ellipsis;
  white-space:          nowrap;
  border:               0px;
  cursor:               pointer;
}
button.btn-leiste:hover, 
button.btn-leiste-0:hover,
button.btn-leiste-50-li:hover,
button.btn-leiste-50-re:hover,
button.btn-leiste-absatz-prev:hover,
button.btn-leiste-absatz-save:hover,
button.btn-leiste-absatz-next:hover {
  background-color:     var(--col-btn-hov);
}
img.btn-pic {
  height:               80%;
}

button.btn-leiste-absatz-prev {
  width:               50px;
  margin-right:        10px;
}
button.btn-leiste-absatz-save {
  width:               calc(100% - 120px);
}
button.btn-leiste-absatz-next {
  width:               50px;
  margin-left:         10px;
}
button.btn-leiste-50-li {
  width:               calc(50% - 2.5px);
  margin-right:        2.5px;
}
button.btn-leiste-50-re {
  width:               calc(50% - 2.5px);
  margin-left:        2.5px;
}

/* P A G E   S E L E C T *********************************/

.page-select {
	position: 				    relative;
  float:                left;
	text-align: 			    center;
  width:                100%;
  height:               auto;
  background-color:     var(--col-btn-bgr);
  display:              flex;
  flex-wrap:            wrap;
  justify-content:      center;
}

a.page-nr, a.page-nr-highlight, .page-first, .page-next {
	position: 				    relative;
  float:                left;
	text-align: 			    center;
  width:                40px;
  height:               40px;
  margin:               5px;
  background-color:     var(--col-btn-bgr);
  border-radius:        50%;
  border:               0px solid white;
  font-family:          'open sans', sans-serif;
  font-size: 				    20px;
	font-weight: 			    lighter;
  line-height:          40px;
  color:                var(--col-btn-txt);
}
.page-first, .page-next {
  padding-left:         5px;
  padding-right:        5px;
  border-radius:        5%;
  width:                auto;
}
div.page-first, div.page-next {
  border-radius:        0%;
  color:                var(--col-btn-txt);
}
div.page-nr {
  width:                100%;
}
a.page-nr:hover, a.page-first:hover, a.page-next:hover {
  background-color:     var(--col-btn-hov);
}

a.page-nr-highlight {
  border:               1px solid var(--col-btn-txt);
}

img.img-page-select {
  margin-top:           5px;
  height:               30px;
}


.space-50        {width: 100%; height: 50px;}
.space-100       {width: 100%; height:100px;}
.space-150       {width: 100%; height:150px;}
.handy-space-50  {width: 100%; height: 50px;display: none;}
.handy-space-100 {width: 100%; height:100px;display: none;}
.handy-space-150 {width: 100%; height:150px;display: none;}


/**********************************************************
 HANDY GRÖßE
***********************************************************/

@media(max-width:400px) {
  :root {--width:375px;}
  
  body {font-size: 0.9em;background-image: none;}
  .start-bild img {width: auto;height:100%;}
  .start-text1    {margin-top: 60px;margin-left:20px;font-size:30px;}
  .start-text2    {margin-top: 110px;margin-right:20px;font-size:30px;}
  .intro-bild     {width: 100%;}
  .intro-blau     {width: 100%;}
  .intro-schrift  {width: calc(100% - 60px); padding:10px 0px 20px 50px;font-size: 26px;height: auto;}

  .handy-space-50  {display: block;}
  .handy-space-100 {display: block;}
  .handy-space-150 {display: block;}
}


@keyframes left-in {
	0%   {transform: translate(-5em);	opacity: 0;}
	50%  {opacity: 0.25;}
	80%  {opacity: 0.75;}
	100% {transform: translate(0); opacity: 1;}
}

@keyframes right-in {
	0%   {transform: translate(5em); opacity: 0;}
	50%  {opacity: 0.25;}
	80%  {opacity: 0.75;}
	100% {transform: translate(0); opacity: 1;}
}

@keyframes einblenden {
	0%   {transform: scale(50%); opacity: 0;}
	100% {transform: scale(100%); opacity: 1;}
}