/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* ================================
   Grundlegende Reset-Elemente
================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    font-family: 'Roboto';
}

html {
  scroll-behavior: smooth;
  font-size: 18px;
}

body {
  font-family: arial;
  font-size:100%;
  line-height: 1.6;
  background: #fff;
  color: #222;
overflow: scroll;
}

/* ================================
   Content-Elemente
================================ */

h2 {
  font-size:160%;
  font-weight: 600;
  line-height: 120%;
  color:#339933;
  margin-bottom: .4rem;
font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

p {
  margin: 0.6rem 0;
  line-height: 140%;
}

p a, li a {
  color:#339933;
  text-decoration:none;
}

ol li {
  background-image: none;
  padding: 0 0 0 4px;
  margin: 0 0 0 24px;
  list-style-type:decimal;
}

ul li {
  background-image: url(/images/li_cir.png);
  background-repeat: no-repeat;
  background-position: left top 5px;
  background-size: 16px;
  padding: 0 0 0 24px;
  list-style-type:none;
}

.highlight {
    font-size: 1.6rem;
  padding: .6rem 1% .6rem 1%;
  background-color:rgba(51,153,51,1) !important;
  color:#fff;
  margin: 0 0 12px 0;
    display: inline-block;
}

/* ================================
   Layout & Struktur
================================ */

.main, .logo {
  width: 100%;
  padding: 0 0 0 0;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  grid-column-gap: 0%;
}

.main .logo {
    position: relative;
}

.logo .left {
  display: grid;
  justify-items:start;
}

.logo .left a  {
    align-items: start;
    display: grid;
}

.logo .left img  {
  width: 30%;
  padding: .4rem 0 .4rem 0;
}

.logo .right img {
  width: 30%;
    height: 10px;
}

section {
  padding: 0 0 1rem 0;
}
    
.container {
  width: 80%;
  margin: 0 auto;
  padding: 1rem 0;
}
    
#map_wrapper .container {
  width: 100%;
	padding: 0;
}

.main .bilder {
  width: 100%;
  padding: 0 0 0 0;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  grid-column-gap: 0%;
}

.main img {
  width:100%;
}

#bilder {
  display: grid;
  grid-column-start:1; 
  grid-column-end:3;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  grid-column-gap: 0%;
  position:relative;
}

#bilder .container {
  display: grid;
  width: 100%;
}

#bilder img {
  width:100%;
}

#bilder .headline {
  position: absolute;
    bottom: 0;
    width: 100%;
    display: grid;
    justify-items: center;
    background-color: #000;
}

#bilder .headline h1, #bilder .headline h2 {
  color:#fff;
}

#bilder .headline h1 .headline_red {
  color:#f00;
}
    
#projekt, #map_wrapper, #buergerbewegung, #mitmachen, #linksammlung, #kontakt {
  display: grid;
  grid-column-start:1; 
  grid-column-end:3;
}
    
#projekt {
  grid-row-start:2; 
  grid-row-end:3; 
}
    
#projekt .container {
  text-align:justify;
	padding: 1rem 0 0 0;
}
    
#map_wrapper {
  grid-row-start:4; 
  grid-row-end:5; 
}

#folgen {
  display: grid;
  grid-column-start:1; 
  grid-column-end:3; 
  grid-row-start:6; 
  grid-row-end:7; 
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  grid-column-gap: 0%;
}

#folgen h2 {
  color:#fff !important;
  background-color:rgba(0,0,0) !important;
  margin-bottom: 0.1rem !important;
  width: fit-content;
}

#folgen #tiere h2 {
  padding: .6rem 12% .6rem 2%;
}

#folgen #menschen h2 {
  padding: .6rem 4% .6rem 12%;
}
    
#folgen #tiere {
  text-align: right;
  justify-items: end;
    display: grid;
}
    
#folgen #menschen {
}

section#tiere:first-child, section#menschen:nth-child(2) {
  padding: 0 2% 0 2%;
}
    
#folgen #tiere .container, #folgen #menschen .container {
  width:100%;
  padding: 0 2% 0 2%;
}

#folgen #tiere .container ul, #folgen #menschen .container ul {
  margin: 0;
}

#folgen #tiere .container li, #folgen #menschen .container li {
  list-style-type:none;
  margin-bottom: 0.1rem;
  background-color:rgba(51,153,51,.2);
}

#folgen #tiere .container li {
  list-style-type:none;
  margin-bottom: 0.1rem;
  padding: .4rem 5% .8rem 6%;
  background-image: url(/images/li_rect.png);
  background-repeat: no-repeat;
  background-position: right 1% top .6rem;
  background-size: 2% auto;
}

#folgen #menschen .container li {
  list-style-type:none;
  margin-bottom: 0.1rem;
  padding: .4rem 6% .8rem 5%;
  background-image: url(/images/li_rect.png);
  background-repeat: no-repeat;
  background-position: left 1% top .6rem;
  background-size: 2% auto;
}
    
#buergerbewegung {
  grid-row-start:8; 
  grid-row-end:9;
  background-color:rgba(51,153,51,.2);
    margin: 0 0 4px 0;
}
    
#mitmachen {
  grid-row-start:10; 
  grid-row-end:11;
  background-color:rgba(51,153,51,.2);
    margin: 0 0 4px 0; 
}
    
#linksammlung {
  grid-row-start:12; 
  grid-row-end:13;
  background-color:rgba(51,153,51,.2);
    margin: 0 0 4px 0;  
    background-image: url(/images/chicken.png);
  background-repeat: no-repeat;
  background-position: center bottom 1rem;
  background-size: auto 80%;
}
    
#kontakt {
  grid-row-start:14; 
  grid-row-end:15;
  background-color:rgba(51,153,51,.2);
}

/* ================================
   Header
================================ */

header {
  padding: 0;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

header h1 {
  font-size: 2rem;
  font-weight: 700;
}

header .subtitle {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  opacity: 0.8;
}

/* Container im Header für Burger-Positionierung */
header .container {
  position: relative;
}

/* ================================
   Navigation
================================ */

.main-nav {
  margin: .4rem 0;
}

.main-nav a {
  margin: 0 1rem 0 0;
  text-decoration: none;
    color: #339933;
  font-size: 1.2rem;
}

.main-nav a:nth-child(4) {
    color: #fff;
    width: fit-content;    
    justify-items: end;
    display: inline;
}

.main-nav a:hover {
  text-decoration: underline;
}

/* ================================
   Buttons
================================ */

.btn-primary {
  display: inline-block;
  padding: 0.6rem 1rem;
    background-color: rgba(51,153,51,1);
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  margin-top: .5rem;
}

.btn-primary:hover {
    background-color: rgba(51,153,51,.8);
}

/* ================================
   Footer
================================ */

footer {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ================================
   Burger-Navigation (neu)
   - Desktop: normales Menü
   - < 768px: Burger rechts, Menü ein-/ausklappbar
================================ */

/* Checkbox unsichtbar */
.nav-toggle {
  display: none;
}

/* Burger-Label Basis: Desktop unsichtbar */
.nav-toggle-label {
  display: none;
}

/* ================================
   Karte
================================ */

#map-consent-box {
    background-color: rgba(0,0,0,1);
	margin: .4rem 0 1rem 0;
	padding: 2rem 10% 2rem 22%;
	width:100%;
    background-image: url(/images/openstreetmap.png);
  background-repeat: no-repeat;
  background-position: left 10% center;
  background-size: 10% auto;
}

#map-consent-box h3 {
  	color: #339933;
}

#map-consent-box p {
  	color: #fff;
}

button {
  	appearance: none;
  	-webkit-appearance: none;
  	-moz-appearance: none;

  	border: none;
  	background: none;
  	box-shadow: none;
}

#map {
    height: 420px;
    width: 100%;
    display:none;
}

#load-map-btn {
    background-color: rgba(51,153,51,1);
  	color: #fff;
  	padding: 10px 14px 10px 14px;
  	cursor:pointer;
}

#load-map-btn:hover {
    background-color: rgba(0,124,0,1);
}

/* ================================
   Mobile: bis 767px
================================ */

@media (max-width: 767px) {

body {
  font-size:90%;
  line-height: 1.4;
}

  /* Navigation zunächst verstecken */

.logo {
  width: 100%;
  padding: 0 0 0 0;
  display: grid;
  grid-template-columns: 90% 10%;
  grid-template-rows: auto auto;
  grid-column-gap: 0%;
}

.logo .left {
  display: grid;
  justify-items:start;
}

.logo .left img  {
  width: 40%;
  padding: .4rem 0 .4rem 0;
}

.logo .right img {
  width: 30%;
    height: 10px;
}

  header .main-nav {
    display: none;
    text-align: left;
  }

  /* Burger-Icon anzeigen */
  .nav-toggle-label {
    display: block;
    position: absolute;
    top: 1rem;
    right: .4rem;
    cursor: pointer;
  }

  .nav-toggle-label span {
    display: block;
    width: 16vw;
    height: 6px;
    margin: 10px 0;
    background: #339933; /* nach Wunsch an dein Lila anpassbar */
  }

header .main-nav a {
    display: block;
    margin: 0.6rem 0;
    padding: 0 0.4rem 0 0;
}

header .main-nav a.btn-primary {
    display: inline-block;
    margin: 0;
    padding: 0.6rem 0.4rem 0.6rem 0.6rem;
}

  /* Wenn Checkbox aktiv ist -> Menü anzeigen */
  .nav-toggle:checked ~ .main-nav {
    display: block;
    text-align: right;
  }
    
.container {
  width: 92%;
}

#bilder .headline {
  position: unset;
    grid-column-start: 1;
    grid-column-end: 3;
}

h2 {
    font-size: 120% !important;
    font-weight: 600;
    line-height: 110%;
}

#map-consent-box {
    margin: 1.2rem 0 0 0;
    padding: 1rem 4% 1rem 34%;
    background-position: left 4% top 1.8vh;
    background-size: 24% auto;
}

section#projekt {
    padding: 0 0 0 0;
}

#projekt .container {
    text-align: unset;
}

#folgen {
    padding: 0 4% 0 4%;
}

#folgen #tiere .container li {
    padding: 0.4rem 8% 0.8rem 6%;
    background-position: right 2% top 0.64rem;
    background-size: 4% auto;
}

#folgen #menschen .container li {
    padding: 0.4rem 6% 0.8rem 8%;
    background-position: left 2% top 0.64rem;
    background-size: 4% auto;
}

section#tiere:first-child {
    padding: 0 1% 0 0;
}

section#menschen:nth-child(2) {
    padding: 0 0 0 1%;
}

#folgen #tiere .container {
    padding: 0 1% 0 0;
}

#folgen #menschen .container {
    padding: 0 0 0 1%;
}

}

/* ================================
   Desktop: bis 768px
================================ */

@media only screen and (max-width: 768px) {

  /* Burger auf Desktop ausblenden */
  .nav-toggle-label {
    display: none;
  }

  /* Navigation wie gehabt sichtbar */
   header .main-nav {
    display: flex;
    flex-flow: wrap;
  }
    
#linksammlung {
    background-image: url(/images/chicken.png);
  background-repeat: no-repeat;
  background-position: center bottom 1rem;
  background-size: auto 70%;
}

}



/* ================================
   Desktop: bis 425px
================================ */

@media only screen and (max-width: 425px) {
    
#linksammlung {
    background-image: url(/images/chicken.png);
  background-repeat: no-repeat;
  background-position: center bottom 1rem;
  background-size: 80% auto;
}

}