/* ============================================================
   Imagine Consulting — Responsive Stylesheet
   Chrome Android optimiert
   ============================================================ */

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background-image: url('../images/bg.gif');
  background-color: #f5f0eb;
  font-family: 'Comic Sans MS', 'Comic Sans', Verdana, Arial, sans-serif;
  font-size: 14px;
  color: #111111;
  text-align: center;
  line-height: 1.65;
}

a:link, a:visited { text-decoration: none; font-weight: bold; color: #111111; }
a:hover, a:active { text-decoration: none; font-weight: bold; color: #990000; }

h3 { font-size: 1.15em; color: #990000; font-weight: 800; text-align: center; margin: .5em 0; }
h4 { font-size: 1.07em; color: #990000; font-weight: 700; text-align: center; margin: .4em 0; }
h5 { font-size: 1.07em; color: #111111; font-weight: 700; text-align: left; margin: .4em 0; }
h6 { font-size: .9em; color: #111111; font-weight: 500; text-align: center; margin: .3em 0; }

ul { margin: .5em 0 .5em 1.4em; padding: 0; }
ol { list-style-type: decimal; margin: .5em 0 .5em 1.4em; padding: 0; }
span.rot { color: #990000; font-weight: 600; }
img { max-width: 100%; height: auto; }

/* --- Logo ------------------------------------------------- */
.logo {
  display: block;
  width: 96%;
  max-width: 960px;
  margin-top: 18px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: none;
}

/* --- Navigation ------------------------------------------- */
.menue {
  display: block;
  width: 96%;
  max-width: 960px;
  margin-top: 10px;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1em;
  color: #990000;
  font-weight: 600;
  text-align: center;
  line-height: 2;
}
.menue a:link, .menue a:visited { color: #111111; font-weight: bold; }
.menue a:hover { color: #990000; }

/* --- Content ---------------------------------------------- */
.content {
  display: block;
  width: 96%;
  max-width: 960px;
  margin-top: 14px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  background-color: #ffffff !important;
  border: 2px solid #990000;
  padding: 24px 28px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  line-height: 1.7;
}

/* --- Copyright -------------------------------------------- */
.copy {
  display: block;
  width: 96%;
  max-width: 960px;
  margin-top: 8px;
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: .93em;
  color: #990000;
  font-weight: 500;
}

/* --- Cookie-Banner ---------------------------------------- */
#cookie-banner {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background-color: #990000 !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  text-align: center !important;
  font-size: .9em;
  z-index: 99999 !important;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
  line-height: 1.5;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}
#cookie-banner p { margin: 0 0 10px 0; color: #ffffff; }
#cookie-banner button {
  display: inline-block;
  background-color: #ffffff;
  color: #990000;
  border: none;
  padding: 8px 22px;
  font-size: .95em;
  font-weight: bold;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
#cookie-banner button:hover { background-color: #f0f0f0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 720px) {
  body { font-size: 15px; }
  .logo { width: 96%; }
  .menue { width: 96%; font-size: .97em; line-height: 2.2; }
  .content { width: 96%; padding: 20px 18px; background-color: #ffffff !important; }
  .copy { width: 96%; }
}

@media screen and (max-width: 480px) {
  body { font-size: 16px; }
  .logo  { width: 94%; }
  .menue { width: 94%; line-height: 2.4; }
  .content {
    width: 94%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 14px;
    background-color: #ffffff !important;
    border: 2px solid #990000 !important;
  }
  .copy { width: 94%; }
}

@media screen and (max-width: 360px) {
  body { font-size: 15px; }
  .content { padding: 13px 11px; background-color: #ffffff !important; }
}