@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap);

/* GENERAL CSS */
* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {color:#6d6b6b; background-color: #fff; font: 1.0rem/1.6 'Open Sans'; padding: 0; margin: 0;}
a{font-family:georgia !important; font-size:9pt; text-decoration:none; color:#6d6b6b; border:0px none;}
a:hover{text-decoration:underline; border:0px none;}
h2 {  font: bold 1.75rem/1.3 "Oranienbaum", serif; padding: 0; margin: 0; }
h3 {  font: italic small-caps 300 1.3rem/1.4 'Josefin Sans'; padding: 0; margin: 0; }
.alt_font_color {color: #D69746 !important;}
.toplink { color: red; background: white; padding: 0.5em 1em; position: fixed; z-index:1; display: none; position: fixed; right: 10px; bottom: 10px; }
.button { padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-weight: bold; margin: 4px 2px; cursor: pointer; border-radius: 6px; -webkit-box-shadow: 3px 4px 45px -6px rgba(0,0,0,0.67); -moz-box-shadow: 3px 4px 45px -6px rgba(0,0,0,0.67); box-shadow: 3px 4px 45px -6px rgba(0,0,0,0.67); }
.button_up { padding: 4px 8px; margin: 6px 4px; border: 2px solid rgba(109,206,14,0.6); color:#331a1a; background:rgba(255,255,255,0.4); -webkit-transition-property: border, background, color; -moz-transition-property: border, background, color; transition-property: border, background, color; -webkit-transition-duration: 0.8s, 1.0s, 1.2s; -moz-transition-duration: 0.8s, 1.0s, 1.2s; transition-duration: 0.8s, 1.0s, 1.2s; }
.button_up:hover { background:rgba(109,206,14,0.75); border: 2px solid rgba(109,206,14,0.75); color:#fff; }
.border5px {border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px;}
.page { padding: 0; width: 100%; margin: 0; }
.clear_float {claer: both;}

/* HEADER - STARTSEITE */
header { padding: 0; margin: 0; width: 100%; height: calc(100vh + 1px); border-bottom: 0; position: relative; background-color: #fff; box-shadow: 0px 8px 6px #000; border-bottom: 10px red solid;overflow: hidden; }

/* HEADER - STARTSEITE - Metamenü */
#meta_container {width: 100%; height: 38px; background-color: rgb(56, 68, 82, 0.5); z-index: 3000; position: absolute; top: 0; margin: 0px; padding: 0px;}
#meta_top {position: absolute; right: 127px; margin-top:5px;color:#fff;}
#meta_top a {font-size:10pt;color:#ccc; opacity: 1;}
#meta_top a:hover {font-size:10pt;text-decoration:none;color:#fff; opacity: 1;}
#menu_top {white-space:nowrap;word-spacing:10px; font-size:10pt; position:relative;}
#meta_top i {font-size:12pt;}

/* HEADER - STARTSEITE - Hauptmenü */
.menu { display: flex; justify-content: space-between; width: 100%; max-width: 750px; margin: 0; margin-left: -64px; padding: 0; top: 127px; left: calc (50% - 192px); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.menu-item { list-style: none; white-space: nowrap; }
.menu-item > a { font-variant: small-caps; letter-spacing: 0.1150em; word-spacing: 0.28em; white-space: nowrap; cursor: pointer; overflow: hidden; display: block; color: #fff; }
.menu-item > a:hover { color: #D69746; }
.menu-item__text > span { display: inline-block; font-size: 2.25rem; font-family: "Oranienbaum", serif; font-variant: small-caps; text-shadow: 1px 2px 3px #000; white-space: nowrap; }
#mobile_menu_button { display: none; opacity: 1; margin: 0; padding: 0; left: 0; top: 0px; z-index: 4000; position: absolute; }
#mobile_menu_button a img { z-index: 4000; position: absolute; width: 32px; height: 32px; left: 20px; top: 4px; }			    
#mobile_menu { display: none; opacity: 1; width: 100%; height: auto; left: 0px; top: 38px; border-bottom: 1px solid #000; z-index: 3000; position: absolute; background-color: rgb(56, 68, 82, 0.5); margin: 0px; padding: 0px;}
#mobile_menu_link { display: block; margin: 0; padding: 0; left: 0; top: 0px; }
#mobile_menu_link_click { display: none; margin: 0; padding: 0; left: 0; top: 0px; }
ul.mobile_menu { list-style-type: none; margin: 0px; padding: 20px; opacity: 1; }
.mobile_menu_item { color: #fff; font: 300 1.75rem/1.9 'Oranienbaum'; font-variant: small-caps; letter-spacing: 0.1150em; word-spacing: 0.28em; }

/* HEADER - STARTSEITE - Slideshow */
#header-slideshow { width: 100%; height: 100%; margin: 0; padding: 0; top: 0; left: 0; z-index: 1; }
.header_img {width: 100%; height: auto; animation: burnsIn 16s ease infinite alternate; z-index: 1; position: relative; opacity: 0;}
#header_arrow_left, #slideshow_prev {position:absolute; z-index: 8; left:2px; top: 50%;}
#header_arrow_right, #slideshow_next {position:absolute; z-index: 9; right: 2px; top: 50%;}
a.arrow { position: absolute; top: 50%; width: 3vmin; height: 3vmin; background: transparent; border-top: 1vmin solid white; border-right: 1vmin solid white; box-shadow: 0 0 0 lightgray; transition: all 700ms ease; }	
a.left { left: 0px; margin-left: 25px; transform: translate3d(0,-50%,0) rotate(-135deg); }
a.right { right: 0px; margin-right: 25px; transform: translate3d(0,-50%,0) rotate(45deg); }
a.arrow:hover { border-color: #D69746; box-shadow: 0.5vmin -0.5vmin 0 white; }
a.arrow:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%,-60%) rotate(45deg); width: 200%; height: 200%; }
.cycle-pager { text-align: center; width: auto; z-index: 1000000; position: absolute; bottom: -1px; right: 127px; overflow: hidden; z-index: 4000 !important; }
.cycle-pager span { font-family: arial; font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; cursor: pointer; }
.cycle-pager span.cycle-pager-active { color: #D69746; }
.cycle-pager > * { cursor: pointer; }
#black_bg { width: 100%; height: 100%; background-color: black;	opacity: 0.35; top: 0; left: 0; z-index: 2000; position: absolute; }

/* HEADER - STARTSEITE - Slideshow-Animation */
@-webkit-keyframes burnsIn { from { -webkit-transform: scale(1,1); transform: scale(1,1); -ms-transform: scale(1,1); } to { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } }
@-webkit-keyframes burnsOut { from { -webkit-transform: scale(1,1); transform: scale(1,1); -ms-transform: scale(1,1); } to { -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); } }
@-moz-keyframes burnsIn { from { -webkit-transform: scale(1,1); transform: scale(1,1); -ms-transform: scale(1,1); } to { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } }
@-moz-keyframes burnsOut { from { -webkit-transform: scale(1,1); transform: scale(1,1); -ms-transform: scale(1,1); } to { -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); } }
@keyframes burnsIn { from { -webkit-transform: scale(1,1); transform: scale(1,1); -ms-transform: scale(1,1); } to { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } }
@keyframes burnsOut { from { -webkit-transform: scale(1,1); transform: scale(1,1); -ms-transform: scale(1,1); } to { -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); } }

/* HEADER - STARTSEITE - MessageBox */
#message_box {width:auto; height:auto; left: 60vw; right:127px; top:35%; padding:20px; line-height:28px; position:absolute; color:#cbcbcb; background-color: rgba(0, 0, 0, 0.35); border:1px solid #000; z-index:7;}
#message_box p {font-size:12pt; font-weight:bold; padding:0px; margin:0px 0 16px 0;}
#message_box p#message_box_headline {font: 300 2.0rem/1.3 "Oranienbaum"; text-transform: uppercase; letter-spacing: 0.1150em; word-spacing: 0.28em; color: #D69746;}
#message_box span.close_layer {font-size:10pt; color:#6d6b6b; padding:0px; margin:-10px -2px 0 0; float:right;}
#message_box span.close_layer a, #message_box_mini a {font-size:10pt; color:#cbcbcb;}
#message_box span.close_layer a:hover, #message_box_mini a:hover {font-size:10pt; color:#fff !important; text-decoration: none; }
#message_box_mini {z-index:5; position:absolute; font-size:10pt; background-color: rgba(0, 0, 0, 0.5); border:1px solid #000; text-align: center; min-width:150px; padding: 3px; right:127px; top: 127px;display:none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;}

#meta_bottom {width: 100%; height: 38px;  background-color: rgb(56, 68, 82, 0.5); z-index: 3000; position: absolute; bottom: 0;}

/* INHALT - STARTSEITE */
.columns { display: flex; flex-flow: row wrap; justify-content: center; margin: 0; padding-left: 127px; padding-right: 127px; }
.column { max-width: 1280px; flex: 1; border: 0; margin: 30px; padding: 0; &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } }

.claim_content, .claim_content-1 {background-color: rgb(56, 68, 82, 1);margin:0px;padding:25px;top:0px;left:0px;}
.claim_content-1 {z-index: 1;background-color: transparent;}
#claim, #claim-3 {margin:0px;padding:0px;font-size:18pt;font-weight:bold;color:#6d6b6b;text-align:center;}
#claim-2, #claim-4 {margin:0px;padding:0px;font-size:12pt;font-weight:bold;color:#bcbcbc;text-align:center;}
#claim-4 {color:#fff;}

#sec2 { min-height: calc(100vh + 1px);margin:0;padding:0;top:0;left:0; background-image: url('header_tropenfalter.jpg'); background-position: center; background-repeat: repeat-y; background-attachment: fixed;}
.about_me_img {min-width:175px; max-width: 20%; position: relative; top:10px;margin-bottom:5px; float: right; opacity: 0.5; transform: rotate(15deg);}
.about_me {margin-top:50px;}
.about_me_pic { min-width:232px; max-width: 35%; height:auto; float:left; margin: 0 7% 0 0;}

.reveal{ position: relative; transform: translateY(150px); opacity: 0; transition: 4s all ease; }
.reveal.active{ transform: translateY(0); opacity: 1; }

.teaser_icon {margin-left:93px;margin:0px;position:absolute;}

.link { width: 10rem; height: 10rem; display: inline-block; font: 300 1.75rem/1.4 "Oranienbaum", serif; font-family: "Oranienbaum", serif; text-transform: uppercase; letter-spacing: 0.1175em; word-spacing: 0.3em; text-shadow: 1px 2px 3px #000; }
.link__svg { width: 100%; height: auto; transform-box: fill-box; fill: #fff; stroke: #D69746; stroke-width: 0.05em; stroke-linecap: round; stroke-linejoin: round; stroke-text-shadow: 1px 2px 3px #000; }
.link__cloud { transform-origin: 50% 50%; -webkit-animation: rotate normal infinite 60s linear; animation: rotate normal infinite 60s linear; fill: rgba(0, 255, 255, 0.1); }
.link__face, .link__arrow { transform-origin: 50% 50%; transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0); }
.link:hover .link__face, .link:hover .link__arrow { transform: scale(1.35); transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
.link__arrow { stroke-width: 0.09em; }
.link__text { -webkit-animation: rotateReverse normal infinite 20s linear; animation: rotateReverse normal infinite 20s linear; transform-origin: 50% 50%; font-family: "Oranienbaum", serif; }
.link:hover .link__text { -webkit-animation-play-state: paused; animation-play-state: paused; }
.link--alt { font-size: 1.15rem; letter-spacing: 0; word-spacing: 0; }
@-webkit-keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@-webkit-keyframes rotateReverse { to { transform: rotate(-360deg); } }
@keyframes rotateReverse { to { transform: rotate(-360deg); } }


hr.sep-1 {
  visibility: hidden;
  position: relative;
  display: block;
  margin-top: 125px;
  margin-bottom: 100px;
  height: 2px;
  border:none;
  background: linear-gradient(to right, transparent 0%, transparent 50%, transparent 100%, transparent 50%, transparent 0%), linear-gradient(to right,  #fff, #D69746, #fff, #D69746, #fff); 
  transform: rotate(3deg);
  transform-origin: 50% 0%;
  overflow:visible;
  -webkit-animation:16s infinite alternate sep-1_anim;
  -moz-animation:   16s infinite alternate sep-1_anim;
  -o-animation:     16s infinite alternate sep-1_anim;
  animation:        16s infinite alternate sep-1_anim;  
}
hr.sep-1::after {
  content: url(header_bug.png);
  white-space: pre;
  display: block;
  position: absolute;
  top: 1px;
  left: 50%;
  padding-left: 2rem;
  padding-right: 2rem;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;  
  padding: 0;
}
hr.sep-1::before {
  content: '' ;
  width: 18rem;
  height: 1rem;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background-image: linear-gradient(to right, transparent 50%, transparent 0%),  linear-gradient(to right, transparent, #fff, transparent);
}
@-webkit-keyframes sep-1_anim { 0%   { width: 100%; } 50% { width: 100%; } 80% { width: 20%; } 100%{ width:100%; } }
@-moz-keyframes sep-1_anim { 0%   { width: 100%; } 50% { width: 100%; } 80% { width: 20%; } 100%{ width:100%; } } 
@-o-keyframes sep-1_anim { 0%   { width: 100%; } 50% { width: 100%; } 80% { width: 20%; } 100%{ width:100%; } } 
@keyframes sep-1_anim { 0%   { width: 100%; } 50% { width: 100%; } 80% { width: 20%; } 100%{ width:100%; } }

footer { padding: 0; margin:0px; top: 0; left:0; background-color: rgb(56, 68, 82, 0.7); }

@media screen and (max-width: 1680px) {
header { height: auto; border-bottom: 10px red solid; }
ul.menu {display: flex;}
#message_box {left: 50vw; right:127px; top:30%;}
}

@media screen and (max-width: 1280px) {
header { height: auto; border-bottom: 10px yellow solid; }
ul.menu {display: none;}
#mobile_menu_button { display: block;}
#message_box {left: 127px; right:127px; top:33%;}
.columns { padding-left: 75px; padding-right: 75px; }
h1 img {width:50%; height: 50%;}
}

@media screen and (max-width: 980px) {
header { height: auto; border-bottom: 10px green solid; }
.columns .column { margin-bottom: 30px;flex-basis: 40%; &:nth-last-child(2) { margin-right: 0; } &:last-child { flex-basis: 100%; margin: 0; } }
.columns { padding-left: 25px; padding-right: 25px; }
ul.menu {display: none;}
#mobile_menu_button { display: block; }
#message_box {left: 100px; right:100px; top:20%;}
#meta_top, .cycle-pager {right:100px;}
.circle_link {display: none;}
#claim {padding-bottom:10px;}
}

@media screen and (max-width: 680px) {
header { height: auto; border-bottom: 10px blue solid; }
.columns .column { flex-basis: 100%; margin: 0 0 60px 0; }
.columns { padding-left: 25px; padding-right: 25px; }
ul.menu {display: none;}
#mobile_menu_button { display: block; }
#meta_top {position: absolute; right: 20px;}
.lady_bug {display: none !important;}
#message_box { display: none !important; }
#message_box_mini { display: none !important; }
pagetitle, h1 img {display: block;}
#header_arrow_left, #header_arrow_right {display: none;}
.cycle-pager {right: 20px;}
.about_me_img { margin-top: 30px;}
.about_me_pic { float:none !important; min-width: 100% !important;}
}

@media all and (orientation:landscape) {
#sec2, #sec3 {  background-size: 100% auto; }
.header_img { height: auto !important; width: 100vw !important; }
}

@media all and (orientation:portrait) {
#sec2, #sec3 {  background-size: auto 100%; }
.header_img { height: 100vh !important; width: auto !important;margin-left:-50vw; }
.circle_link {display: block;}
}