@charset "utf-8";
@font-face {font-family: 'Anaheim'; src: url(../schriften/anaheim-v7-latin-regular.woff2);}
@font-face {font-family: 'Open Sans'; src: url(../schriften/OpenSans_Condensed-Bold.ttf);}

*, *:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}

html {scroll-behavior: smooth;}
html, body, #wrap {height: 100%; background:#fff;}
body > #wrap {height: auto; min-height: 100%;}

body {font-family:'Anaheim', sans-serif; font-size:16px; color:#222; background:#fefefe;}

#top {position:absolute; top:0; left:0;}
.link-to-top {display:none;}

h1, h2, h3, h4 {font-family:'Open Sans', sans-serif;}
h1, h2 {font-size:24px;}
h2 {color:#00468c;}
h3, h4 {font-size:20px; color:#00468c;}

strong {color:#001a66;}

.hyphens {hyphens: auto;}
.fotokennzeichnung {position:absolute; right:20px; bottom:20px; z-index:2; color:#fff; text-align:right;}

li {font-family:'Anaheim', sans-serif; margin-left:14px; font-size:16px;}


a, a > * {-webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; text-decoration:none;}


.reveal {
opacity: 0;
transform: translateY(60px);
transition: opacity .60s cubic-bezier(.4,0,.2,1), transform .60s cubic-bezier(.4,0,.2,1);
}

.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.delay-1 {transition-delay: 0.3s;}
.delay-2 {transition-delay: 0.4s;}
.delay-3 {transition-delay: 0.5s;}

.navi {position:relative; margin:0px auto; text-align:center;}
.container {width:1280px; position:relative; margin:100px auto; overflow: hidden; /* oder overflow: auto */}
.col1-3 {width:300px; height:300px; margin:10px; float:left; background:#fbfbfb; padding:30px;}
.col2-3 {width:620px; height:300px; margin:10px; float:left; background:#fbfbfb; padding:30px;}
.col2-3.auto, .col1-3.auto, .col1-1.auto {height:auto;}
.col1-1 {width:1280px; margin:10px; float:left; background:#fcfcfc; padding:30px;}

.overflow, .box {overflow:hidden;}

.footer {padding-top:150px; padding-bottom:200px;}
.footer .col1-3 {background:#fff !important}


/* Für den Container – animiert dessen Höhe beim Umordnen */
.transitions-enabled {
transition-property: height, width;
transition-duration: 0.4s;
transition-timing-function: ease-in-out;
}


.button-group {display:inline-block; font-family:'Open Sans', sans-serif}


.button-group:after {
content: '';
display: block;
clear: both;
}

.button-group a {
float: left;
margin-top:20px;
}

.button-group a:hover {
color:#666;
}



.link, .logo {
cursor:pointer;	
margin:20px 20px 0 20px;
font-size:19px;
}

.logo {
font-size:19px;
margin-top:22px;
}

/*
.logo::before {
background-image: url('../pix/logo.png');
background-size: 10px 20px;
display: inline-block;
width: 10px; 
height: 20px;
margin-right:8px;
content:"";
}
*/

a.to-top {color:#000; font-family:'Open Sans', sans-serif; letter-spacing:0.5px; text-decoration:none;}


.filter-button-group a.active {
color:#111;
}

.filter-button-group a:not(.active) {
color:#757e8c;
}

.filter-button-group a:not(.active):hover {
color:#111;
}

.filter-button-group a.active::after {
content: "▾";
display: block;
text-align: center;
font-size: 0.8em;
color:#00ff40;
line-height: 0.5;
}

.filter-button-group a:not(.active)::after {
content: "▾";
display: block;
text-align: center;
font-size: 0.8em;
color:#aaa;
line-height: 0.5;
}

.filter-button-group a.logo:not(.active)::after {
content: "";
/* color: green; */
}

.image, .image img  {width: 300px; height:300px; object-fit: cover;}


.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: 0 auto;
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #757e8c;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger-btn.open span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2) {opacity: 0;}
.hamburger-btn.open span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

.mobile-nav-links {
  display: none;
  flex-direction: column;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-nav-links.open {
  max-height: 400px;
}
.mobile-nav-links .link {
  margin: 10px 0;
  font-size: 17px;
}




@media only screen and (max-width: 1440px) {
.container {width:980px; margin:50px auto;}
.col1-1 {width: 980px; padding-bottom:30px;}
}

@media only screen and (max-width: 1082px) {
.container {width: 500px;}
.col1-3, .col2-3 {height:auto; width: 500px;}
.image, .image img {width: 500px; height:500px;}
.col1-1 {height:auto; width: 500px;}
.navi {width: 100%;}
.button-links {display: none;}
.hamburger-btn {display: flex;}
.mobile-nav-links {display: flex;}
.link-to-top {display:block !important;}
}

@media only screen and (max-width: 680px) {
.container {width:300px;}
.col1-3, .col2-3 {height:auto; width: 280px;}
.image, .image img  {width: 280px; height:280px;}
.col1-1 {height:auto; width: 280px;}
}