/* default styles for extension "tx_frontend" */
    .ce-align-left { text-align: left; }
    .ce-align-center { text-align: center; }
    .ce-align-right { text-align: right; }

    .ce-table td, .ce-table th { vertical-align: top; }

    .ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; }

    .ce-left .ce-gallery, .ce-column { float: left; }
    .ce-center .ce-outer { position: relative; float: right; right: 50%; }
    .ce-center .ce-inner { position: relative; float: right; right: -50%; }
    .ce-right .ce-gallery { float: right; }

    .ce-gallery figure { display: table; margin: 0; }
    .ce-gallery figcaption { display: table-caption; caption-side: bottom; }
    .ce-gallery img { display: block; }
    .ce-gallery iframe { border-width: 0; }
    .ce-border img,
    .ce-border iframe {
        border: 2px solid #000000;
        padding: 0px;
    }

    .ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
        margin-bottom: 30px;
    }
    .ce-image .ce-gallery { margin-bottom: 0; }
    .ce-intext.ce-right .ce-gallery { margin-left: 30px; }
    .ce-intext.ce-left .ce-gallery { margin-right: 30px; }
    .ce-below .ce-gallery { margin-top: 30px; }

    .ce-column { margin-right: 30px; }
    .ce-column:last-child { margin-right: 0; }

    .ce-row { margin-bottom: 30px; }
    .ce-row:last-child { margin-bottom: 0; }

    .ce-above .ce-bodytext { clear: both; }

    .ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; }

    /* Headline */
    .ce-headline-left { text-align: left; }
    .ce-headline-center { text-align: center; }
    .ce-headline-right { text-align: right; }

    /* Uploads */
    .ce-uploads { margin: 0; padding: 0; }
    .ce-uploads li { list-style: none outside none; margin: 1em 0; }
    .ce-uploads img { float: left; padding-right: 1em; vertical-align: top; }
    .ce-uploads span { display: block; }

    /* Table */
    .ce-table { width: 100%; max-width: 100%; }
    .ce-table th, .ce-table td { padding: 0.5em 0.75em; vertical-align: top; }
    .ce-table thead th { border-bottom: 2px solid #dadada; }
    .ce-table th, .ce-table td { border-top: 1px solid #dadada; }
    .ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
    .ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; }

    /* Space */
    .frame-space-before-extra-small { margin-top: 1em; }
    .frame-space-before-small { margin-top: 2em; }
    .frame-space-before-medium { margin-top: 3em; }
    .frame-space-before-large { margin-top: 4em; }
    .frame-space-before-extra-large { margin-top: 5em; }
    .frame-space-after-extra-small { margin-bottom: 1em; }
    .frame-space-after-small { margin-bottom: 2em; }
    .frame-space-after-medium { margin-bottom: 3em; }
    .frame-space-after-large { margin-bottom: 4em; }
    .frame-space-after-extra-large { margin-bottom: 5em; }

    /* Frame */
    .frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; }
    .frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; }
    .frame-indent { margin-left: 15%; margin-right: 15%; }
    .frame-indent-left { margin-left: 33%; }
    .frame-indent-right { margin-right: 33%; }

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
.flex_wrap { display:flex; justify-content: space-between; flex-wrap: wrap; }

.flex_1,
.flex_2,
.flex_3,
.flex_4,
.flex_5,
.flex_6,
.flex_7,
.flex_8,
.flex_9,
.flex_10,
.flex_11,
.flex_12 {
  display: block;
  position:relative;
}

/* 1 Spalte = 6% */
/* 1 Abstand = 2,54545455% */
.flex_1 { width: 6%; }
.flex_2 { width: 14.54545455%; }
.flex_3 { width: 23.0909091%; }
.flex_4 { width: 31.63636365%; }
.flex_5 { width: 40.1818182%; }
.flex_6 { width: 48.72727275%; }
.flex_7 { width: 57.2727273%; }
.flex_8 { width: 65.81818185%; }
.flex_9 { width: 74.3636364%; }
.flex_10 { width: 82.90909095%; }
.flex_11 { width: 91.4545455%; }
.flex_12 { width: 100%; }

.flex_alpha {}
.flex_omega {  }


/* --------- Allgemeines ---------------------------------------------------------------------*/
html, body { width:100%; height:100%; }

body { background:#FFF; }
  .wrapper { box-sizing:border-box; position:relative; display:block; margin-left:auto; margin-right:auto; padding:0 5%; }
  .hide { display:none; }

  .no-scroll {height:100%; overflow:hidden; }
  .transition {  
    transition: all 0.4s ease-in 0s; /* explorer 10 */
    -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
    -moz-transition: all 0.4s ease-in 0s; /* firefox */
    -o-transition: all 0.4s ease-in 0s; /* opera */
  }

  figure.table { margin:0;}

  .ce-right .ce-gallery { max-width: 40%; }
  .ce-gallery img { max-width:100%; height:auto; }

  .fsc-default { position: relative; width: 100%; margin-bottom:3%; }
  .fsc-default:last-child { margin-bottom:0; }

/* --------- Container -------------*/
.gridelement_content { display: flex; justify-content: space-between; flex-wrap: wrap; }


/* --------- Header ---------------------------------------------------------------------*/
#header{  }
  #header .wrapper { display: flex; justify-content: space-between; padding-top: 3%; }

  /* Logo */ 
  #header .logo { position: relative; display: flex; justify-content: flex-end;}
  #header .logo img { display:block; width:100%; height:auto; max-width: 350px; }


/* --------- Main Content -------------*/ 
#main { position:relative; overflow:hidden; }
#main .wrapper { padding:10% 5%; display:flex; flex-wrap: wrap; }
#main .wrapper .content { width: 100%; }

#main .wrapper .content ul { padding-left:20px; }


/* --------- Pageteaser -------------*/ 
#main .pageteaser { width:100%; padding-top:10%; }
#main .pageteaser-wrapper { display: flex; flex-wrap: wrap; margin:3% 0; }
#main .pageteaser a {  font-size: 1.4em; position: relative; text-transform: uppercase; display:flex; flex-direction: column; justify-content: center; padding:40px 150px 40px 30px; margin:1% 0; margin-right:2.54545455%; border:1px solid #00a9d5; color: #00a9d5; box-sizing: border-box; }
#main .pageteaser a:after { 
  transition: all 0.4s ease-in 0s; /* explorer 10 */
  -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
  -moz-transition: all 0.4s ease-in 0s; /* firefox */
  -o-transition: all 0.4s ease-in 0s; /* opera */
}
#main .pageteaser a:hover:after { transform:scale(1.05); }
#main .pageteaser a:nth-child(3n+3) { margin-right:0; }
#main .pageteaser a.button-a:after { content:''; position: absolute; right: -35px; bottom:0; width:100%; height:150%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/maedchen.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-b:after { content:''; position: absolute; right: -30px; bottom:0; width:100%; height:130%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/katze.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-c:after { content:''; position: absolute; right: 5px; bottom:0; width:100%; height:150%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/giraffe_mitBuch.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-d:after { content:''; position: absolute; right: 0px; bottom:0; width:100%; height:130%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/ratte-mit-ring.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-e:after { content:''; position: absolute; right: -10px; bottom:0; width:100%; height:100%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/Gruppe.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-f:after { content:''; position: absolute; right: 10px; bottom:0; width:100%; height:120%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/Maedchen_Ballon.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-g:after { content:''; position: absolute; right: -10px; bottom:0; width:100%; height:110%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/Schildkroete-VR.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-h:after { content:''; position: absolute; right: -10px; bottom:0; width:100%; height:120%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/Kraken.png') bottom right no-repeat; background-size:auto 100%; }
#main .pageteaser a.button-warteliste { background:#007659; border-color:#007659; color:#FFF; margin-right:0; }
#main .pageteaser a.button-warteliste:after { content:''; position: absolute; right: 0; bottom:0; width:100%; height:130%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/2giraffen.png') bottom right no-repeat; background-size:auto 100%; }

/* --------- Wenn Warteliste geschlossen ist! -------------*/
#main .pageteaser div.button-warteliste { font-size: 1.4em; position: relative; text-transform: uppercase; display:flex; flex-direction: column; justify-content: center; padding:40px 150px 40px 30px; margin:1% 0; border:1px solid #00a9d5; color: #00a9d5; box-sizing: border-box; background:#007659; border-color:#007659; color:#FFF; margin-right:0; }
#main .pageteaser div.button-warteliste:after { content:''; position: absolute; right: 0; bottom:0; width:100%; height:130%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/2giraffen.png') bottom right no-repeat; background-size:auto 100%; }


/* --------- Nild Madeleine Rüth -------------*/ 
#c7 .ce-textpic, #c7 .ce-gallery, #c7 .ce-row { overflow:visible; }
#c7 figure.image { content:''; position: relative; }
#c7 figure.image:after { content:''; position: absolute; right: -70px; bottom:-40px; width:70%; height:50%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/katze.png') bottom right no-repeat; background-size:100% auto; }


/* --------- iFrame Warteliste -------------*/ 
.warteliste { border:1px solid #007659; aspect-ratio: 2 / 1; min-height: 550px; width:100%; height:auto; }


/* --------- Footer -------------*/
#footer { position:relative; width:100%; border-top:1px solid #00a9d5; }
#footer .wrapper { display:flex; flex-wrap:wrap; padding:2% 5%; position: relative; }
#footer .wrapper::after { content:''; position: absolute; right: 0; bottom:0; width:50%; height:120%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/giraffe.jpg') bottom right no-repeat; background-size:auto 100%; }
  
  #footer p { margin-bottom:1%;  }
  #footer .address { width:100%; position: relative; z-index: 500; }
  #footer .copyright { padding-right:20px; position: relative; z-index: 501; }

  .footernav { position:relative; z-index: 502; box-sizing:border-box; display: block; }
  .footernav ul { margin:0; padding:0; list-style:none; display:flex; }
  .footernav li { position:relative; }
  .footernav li a { display:block; text-decoration:none; padding:0 20px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
  }



/* --------- Kontaktformular -------------*/
.form-group { margin-bottom:20px; display:flex; justify-content: space-between; }
.form-group label { width:30%; line-height:100%; height:50px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-weight: 700; }
.form-group .input { width:70%; }
.form-group input { width:100%; line-height:100%; height:50px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-family: 'Open Sans'; border:1px solid #00a9d5; }
.form-group select { width:100%; line-height:100%; height:50px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-family: 'Open Sans'; border:1px solid #00a9d5; }
.form-group textarea { width:100%; height:200px; padding:10px 10px; font-size:1.0em; box-sizing: border-box; font-family: 'Open Sans'; border:1px solid #00a9d5; }
.btn-group { display: flex; justify-content: flex-end; }
button { font-size:1.0em; font-family: 'Open Sans', Arial, sans-serif; background: none; margin-top:20px; text-transform: uppercase; display:inline-block; padding:20px 30px; border:1px solid #e1bd45; color: #e1bd45; 
  transition: all 0.4s ease-in 0s; /* explorer 10 */
  -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
  -moz-transition: all 0.4s ease-in 0s; /* firefox */
  -o-transition: all 0.4s ease-in 0s; /* opera */
}
button:hover { border:1px solid #00a9d5; color: #00a9d5; } }

.form-group input[type="checkbox"] { display: none; }
.form-group input[type="checkbox"] + span span { display: none; }
.form-group input[type="checkbox"] + span { overflow:hidden; display:block; text-indent:-9999px; }
.form-group input[type="checkbox"] + span::before { width: 30px; height: 30px; background-color: #fff; display: block; content: ""; float: left; margin-right: 5px; }
.form-group input[type="checkbox"]:checked + span::before { box-shadow: inset 0px 0px 0px 3px #fff; background-color: #206eff; }

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('../../../typo3conf/ext/sitepackage/Resources/Public/Fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../../../typo3conf/ext/sitepackage/Resources/Public/Fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: url('../../../typo3conf/ext/sitepackage/Resources/Public/Fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body { color:#00a9d5; font-family: 'Open Sans', Arial, sans-serif; font-weight:300; font-size:20px; line-height:160%; }

b, strong { font-weight:700; }

p { margin:0 0 2%; }

h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', Arial, sans-serif; color:#00a9d5; font-weight:700; font-stretch: 75%; line-height:120%; margin:0; padding:0; } 
h1 { font-size:2.2em; padding-bottom:2%; text-transform: uppercase; }
h1 span{ color:#e1bd45; }
h2 { font-size:1.8em; padding-bottom:2%; text-transform: uppercase; }
/*h3 { font-size:1.7em; padding-bottom:1%; }
h4 { font-size:1.2em; padding-bottom:10px; }
h5 { font-size:1.2em; padding-bottom:15px; font-weight:700; line-height:130%; color:#555555; }
h6 { font-size:1.0rem; padding-top:20px; padding-bottom:0px; font-weight:700; line-height:160%; color:#555555; }*/

/* links */
a,
a:visited,
a:active,
a:hover { text-decoration:none; color:#e1bd45; outline:0 !important; }


a.button { position: relative; text-transform: uppercase; display:inline-block; padding:20px 30px; border:1px solid #e1bd45; color: #e1bd45; 
	transition: all 0.4s ease-in 0s; /* explorer 10 */
	-webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
	-moz-transition: all 0.4s ease-in 0s; /* firefox */
	-o-transition: all 0.4s ease-in 0s; /* opera */
  }
a.button:hover { border:1px solid #00a9d5; color: #00a9d5; }
  
a.button-gruen { font-size: 1.4em; background:#007659; border-color:#007659; color:#FFF; padding:40px 150px 40px 30px; margin-top:40px; }
a.button-gruen:hover { border-color:#007659; color:#FFF; }
a.button-gruen:after { content:''; position: absolute; right: 0; bottom:0; width:100%; height:130%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/2giraffen.png') bottom right no-repeat; background-size:auto 100%;
	transition: all 0.4s ease-in 0s; /* explorer 10 */
	-webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
	-moz-transition: all 0.4s ease-in 0s; /* firefox */
	-o-transition: all 0.4s ease-in 0s; /* opera */
}
a.button-gruen:hover:after { transform:scale(1.05); }


a.button-pdf { position: relative; text-transform: uppercase; display:inline-block; padding:20px 90px 20px 30px; margin-top:30px; border:1px solid #e1bd45; color: #e1bd45; 
	transition: all 0.4s ease-in 0s; /* explorer 10 */
	-webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
	-moz-transition: all 0.4s ease-in 0s; /* firefox */
	-o-transition: all 0.4s ease-in 0s; /* opera */
  }
  a.button-pdf:after { content:''; position: absolute; right:2px; bottom:8px; width:80px; height:80px; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/icon_pdf.jpg') bottom right no-repeat; background-size:100% auto; }
  a.button-pdf:hover { border:1px solid #00a9d5; color: #00a9d5; }
  
 
a.button-zip { position: relative; text-transform: uppercase; display:inline-block; padding:20px 90px 20px 30px; margin-top:30px; border:1px solid #e1bd45; color: #e1bd45; 
  transition: all 0.4s ease-in 0s; /* explorer 10 */
  -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
  -moz-transition: all 0.4s ease-in 0s; /* firefox */
  -o-transition: all 0.4s ease-in 0s; /* opera */
}
a.button-zip:after { content:''; position: absolute; right:2px; bottom:8px; width:80px; height:80px; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/icon_zip.jpg') bottom right no-repeat; background-size:100% auto; }
a.button-zip:hover { border:1px solid #00a9d5; color: #00a9d5; }


table.vita { border-collapse: collapse; }
table.vita td { vertical-align: top; padding-bottom: 5%; }
table.vita .jahreszahl { display:block; padding:10px 20px; margin-right:30px; border:1px solid #00a9d5; }
/* --------- Pfannkuchen-Button -------------*/ 
  .pancake { cursor:pointer; display:none; z-index:3000; position:relative; width:50px; height:50px; background:#e1bd45; }
  .pancake:hover { background:#e1bd45; }
  .fixed .pancake { right:5px; }
  .pancake .line-top { position:absolute; width:30px; height:2px; top:12px; left:10px; background:#FFF; }
  .pancake .line-middle { position:absolute; width:30px; height:2px; top:24px; left:10px; background:#FFF; }
  .pancake .line-bottom { position:absolute; width:30px; height:2px; bottom:12px; left:10px; background:#FFF; }

  .pancake.active { }
  .pancake.active .line-top { transform:rotate(-45deg); top:24px; }
  .pancake.active .line-middle { display:none; }
  .pancake.active .line-bottom { transform:rotate(45deg); bottom:24px; }


/* --------- Hauptnavigation -------------*/ 
.navigation { padding:0; font-weight: 500;}

  .mainnav { width:100%; position:relative; box-sizing:border-box; }
  .mainnav ul { margin:0; padding:0; list-style:none; }
  .mainnav li { position:relative; }
  .mainnav li a { display:block; text-decoration:none; text-transform:uppercase;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
  }

  /*------ 1. Ebene ----------------*/
  .mainnav ul.list1 { position:relative; display:flex; }
  .mainnav li.level_1 { box-sizing:border-box; display:block; margin:0 30px;
    transition: all 0.4s ease-in 0s; /* explorer 10 */
    -webkit-transition: all 0.4s ease-in 0s; /* chrome & safari */
    -moz-transition: all 0.4s ease-in 0s; /* firefox */
    -o-transition: all 0.4s ease-in 0s; /* opera */
  }
  .mainnav li.level_1:last-child { margin-right:0; }
  .mainnav li.level_1:first-child { margin-left:0; }
  .mainnav li.level_1 > a { white-space: nowrap; position:relative; box-sizing:border-box; width:100%; line-height:20px; padding:24px 0; color:#e1bd45; display:block; text-decoration:none; font-size:22px; line-height: 100%; font-weight:300; }
  .mainnav li.level_1:hover > a { color:#00a9d5; }
  .mainnav li.level_1.active > a { color:#00a9d5; }
  
  .mainnav li.level_1:hover ul.list2 {  opacity:1; z-index:400; height: auto; width: auto;}

  /*------ 2. Ebene ----------------*/
  .mainnav .list2 { background:#e1bd45; height:0; width:auto; overflow:hidden; position:absolute; left:-20px; top:70px; opacity:0; z-index:300; box-sizing:border-box;
    transition: all 1s ease-in 0s; /* explorer 10 */
    -webkit-transition: all 1s ease-in 0s; /* chrome & safari */
    -moz-transition: all 1s ease-in 0s; /* firefox */
    -o-transition: all 1s ease-in 0s; /* opera */
  }

  .mainnav .list2-inner { box-sizing:border-box; }

  .mainnav li.level_2 { margin:13px 20px; display:block; box-sizing:border-box; padding:0; 
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -webkit-transition-delay:1s;
    transition-delay:1s;
  }
  .mainnav li.level_2 > a { white-space: nowrap; font-size:0.9em; font-weight:300; position:relative; display:block; color:#FFF; line-height:100%; padding:7px 0;
    -moz-transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    transition:1s;
  }
  .mainnav li.level_2 > a:hover { color:#00a9d5; }
  .mainnav li.level_2.active > a { color:#00a9d5; }
  



.wrapper {
    max-width:2000px;
    width:inherit !important;
}



/* -------------------------------------------------------------------------
   MEDIA QUERIES
   ------------------------------------------------------------------------- */
/* Kann maximal 1800px darstellen. */
@media only screen and (max-width : 1800px) {

    #main .pageteaser a {  font-size: 1.2em; padding:40px 150px 40px 30px; }


} 



/* Kann maximal 1500px darstellen. */
@media only screen and (max-width : 1500px) {

    #main .pageteaser a { width:48.72727275% !important; margin-top:3%; margin-bottom:3%; }
    #main .pageteaser a.button-warteliste { width:100% !important; margin-right:0 !important;}
    #main .pageteaser a:nth-child(3n+3) { margin-right:2.54545455%; }
    #main .pageteaser a:nth-child(2n+2) { margin-right:0; }

}



/* Kann maximal 1400px darstellen. */
@media only screen and (max-width : 1400px) {
    
    

}




/* Kann maximal 1260px darstellen. */
@media only screen and (max-width : 1260px) {


}
 

/* Kann maximal 1200px darstellen. */
@media only screen and (max-width : 1200px) {


}



/* Kann maximal 1100px darstellen. */
@media only screen and (max-width : 1100px) {

} 



/* Kann maximal 1024px darstellen. */
@media only screen and (max-width : 1024px) {

    body { font-size:18px; }

    .flex_8 { width: 100%;}
    .flex_4 { width: 100%;}

    #header .logo { width: 70%; }

    .pancake { display:block; }
    .mainnav { display:none; position:fixed; top:0; left:0; padding-top:80px; margin-top:0; background:rgba(255,255,255,1.0); overflow:scroll; width:100%; height:100%; z-index:2999; }
    .mainnav.active { display:block; }

    .mainnav ul.list1 { justify-content: flex-start; flex-direction:column; overflow:scroll; margin:0; }
    .mainnav li.level_1 { margin:3% 0; width:100%; padding:0 5%; }
    .mainnav li.level_1 > a { padding: 10px 0px 10px; }
    .mainnav li.level_1:hover > a { border-bottom:none; }
    .mainnav li.level_1.active > a { font-weight:700; border-bottom:none; }

    .mainnav .list2 { height:auto; margin:0; padding:20px 0; border-bottom:none; left: inherit; overflow: inherit; position: relative; top: inherit; opacity:1; }
    .mainnav li.level_2 { margin:0; padding: 10px 0; }
    .mainnav li.level_2 > a { margin:0; padding:10px 20px; }
    .mainnav li.level_1.active li.level_2 > a {  }
    .mainnav li.level_1.active li.level_2.active > a {  }


    #main .pageteaser a { width:100% !important; margin-top:5%; margin-bottom:5%; margin-right:0 !important;}

    #footer .wrapper { padding:5% 5% 20%; }
    #footer .wrapper::after { width:50%; height:70%; background: url('../../../typo3conf/ext/sitepackage/Resources/Public/Images/giraffe.jpg') bottom right no-repeat; background-size:auto 100%; }

    #footer .copyright { padding-right:0; margin-top:5%; width: 100%; }
    .footernav li a:first-child { padding-left:0 }
} 


/* Kann maximal 880px darstellen. */
@media only screen and (max-width : 880px) {

    #main .wrapper { padding: 20% 5%; }
}


/* Kann maximal 768px darstellen. */
@media only screen and (max-width : 768px) {

    h1 { font-size:2.0em; padding-bottom:5%;  }
    h2 { font-size:1.6em; padding-bottom:5%; }
    
    .ce-right .ce-gallery { max-width:inherit; width:100%; float: none; margin-left:0 !important; }
    #c7 .ce-textpic, #c7 .ce-gallery, #c7 .ce-row { overflow:hidden; }
    #c7 .ce-column { width:80%; padding-bottom: 50px; }

    .form-group { display: block; }
    .form-group .input { width:100%; }
    
    #footer .wrapper::after { height:50%; }

}


/* Kann maximal 650px darstellen. */
@media only screen and (max-width : 650px) {
    
    #main .pageteaser a { padding:30px 120px 30px 20px; }
    #main .pageteaser a.button-warteliste { margin-top:20%; }

    #footer .wrapper { padding:5% 5% 200px; }
    #footer .wrapper::after { width:100%; height:200px; background-size:auto 100%; }

}


/* Kann maximal 568px darstellen. */
@media only screen and (max-width : 568px) {

    h1 { font-size:1.8em; padding-bottom:7%;  }
    h2 { font-size:1.4em; padding-bottom:7%; }
}

/* Kann maximal 450px darstellen. */
@media only screen and (max-width : 450px) {


}