/* ------------------------------------------------------------ */
/* Variables                                                    */
/* ------------------------------------------------------------ */
body,
.colorsceme_green {
  --color_green_black: #3f4118;
  --color_green_dark: #959b00;
  --color_green_medium: #a7ad00;
  --color_green_light: #cad200;
  --color_green_lighter: #f4ffcd;
  --color_yellow_light: #fff8bd;
  --color_yellow_lighter: #fffbd7;
  --color_warmwhite: #fffef7;
  --color_highlight_orange: #f29400;
  --color_highlight_yellow: #ffff00;
  --color_highlight_green: #e9f100;

  --color_nav_border: #3f4118;
  --color_nav_bg_default: #ffff00;
  --color_nav_bg_hover: #ffff9b;
  --color_nav_bg_open: #ffff00;

  --color_navsecondary_bg_default: #acfa98;
  --color_navsecondary_bg_hover: #cefdc2;
  --color_navsecondary_bg_open: #acfa98;

  --color_nav_text_default: #3f4118;
  --color_nav_text_open: #ff7300;
  --color_navsecondary_text_open: #e96901;

  --content_padding_horiz: 2%;
  --button_progress_width: 70px;
  --nav_row_height: 50px;
  --nav_elem_height: 30px;

  --color_primary_black: #0a3306;
  --color_primary_dark: #2c6926;
  --color_primary_dark_1: #1f571a;
  --color_primary_medium: #79b579;
  --color_primary_light: #dbf0db;

  --color_splash_bg: #dbf0db !important;
}

.colorsceme_blue {
  --color_primary_black: #061f33;
  --color_primary_dark: #346d9d;
  --color_primary_dark_1: #205681;
  --color_primary_medium: #aaccda;
  --color_primary_light: #e6eff3;

  --color_splash_bg: #e6eff3 !important;

  --color_navsecondary_text_open: #c25700;
  --color_navsecondary_bg_default: #91d0e9;
  --color_navsecondary_bg_hover: #b8e2f3;
  --color_navsecondary_bg_open: #91d0e9;
}

.splash,
.infobox {
  --color_splash_bg: #ffffbc;
}

/* ------------------------------------------------------------ */
/* Fonts                                                        */
/* ------------------------------------------------------------ */
/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v29-latin-regular.eot");
  src: local(""),
    url("../fonts/open-sans-v29-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/open-sans-v29-latin-regular.woff2") format("woff2"),
    url("../fonts/open-sans-v29-latin-regular.woff") format("woff"),
    url("../fonts/open-sans-v29-latin-regular.ttf") format("truetype"),
    url("../fonts/open-sans-v29-latin-regular.svg#OpenSans") format("svg");
}

/* open-sans-600 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/open-sans-v29-latin-600.eot");
  src: local(""),
    url("../fonts/open-sans-v29-latin-600.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/open-sans-v29-latin-600.woff2") format("woff2"),
    url("../fonts/open-sans-v29-latin-600.woff") format("woff"),
    url("../fonts/open-sans-v29-latin-600.ttf") format("truetype"),
    url("../fonts/open-sans-v29-latin-600.svg#OpenSans") format("svg");
}

/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-v29-latin-700.eot");
  src: local(""),
    url("../fonts/open-sans-v29-latin-700.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/open-sans-v29-latin-700.woff2") format("woff2"),
    url("../fonts/open-sans-v29-latin-700.woff") format("woff"),
    url("../fonts/open-sans-v29-latin-700.ttf") format("truetype"),
    url("../fonts/open-sans-v29-latin-700.svg#OpenSans") format("svg");
}

body {
  overflow-wrap: anywhere;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.content_copy.splash {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

body.break_texts,
body.break_texts * {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.content_copy,
.news_intro {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: justify;
}

em {
  font-style: normal;
  font-weight: 700;
}

#main a,
.container a {
  color: var(--color_primary_dark);
}

html {
  scroll-behavior: smooth;
}

body {
  background-image: url("../images/back_main.jpg");
  background-repeat: repeat-x;
  background-size: cover;
  background-color: #83a5d5;
  background-attachment: fixed;
  background-position: 0px 0px;
  padding: 3% 3% 6em 3%;
}

#drawer_top,
#page {
  max-width: 970px;
  margin: 0 auto;
  background-color: #efeeec;
  padding: 1%;
  box-shadow: 5px 5px 12px 0px #444;
}

#page {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 30%);
  grid-template-areas:
    "header header"
    "nav_main nav_main"
    "nav_mobile nav_mobile"
    "main margin"
    "footer footer";
}

.nomargin #page {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "nav_main"
    "nav_mobile"
    "main"
    "footer";
}

#header {
  grid-area: header;
}

#nav_main {
  grid-area: nav_main;
}

#nav_mobile {
  grid-area: nav_mobile;
  display: none;
}

#main {
  grid-area: main;
}

#margin {
  grid-area: margin;
}

#footer {
  grid-area: footer;
}

#header_img,
#header_logo {
  width: 100%;
  text-align: center;
}

#header_img .img img {
  width: 100%;
  height: auto;
  max-width: 950px;
  box-shadow: none;
}

#header_logo {
  position: relative;
}

#header_logo #header_logo_text {
  position: absolute;
  bottom: -3%;
  left: 0;
  padding-left: var(--content_padding_horiz);
  padding-right: calc(var(--content_padding_horiz) - 0.5%);
}

/* ------------------------------------------------------------ */
/* NAV                                                          */
/* ------------------------------------------------------------ */

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav div {
  flex-grow: 1;
}

.nav a,
.navbutton,
button,
a.button {
  display: block;
  min-height: var(--nav_elem_height);
  padding-top: 0.2em;
  padding-right: 0.5em;
  padding-bottom: 0.2em;
  padding-left: 0.5em;
  border: 1px solid var(--color_nav_border);
  outline: none;

  font-size: 1.2em;
  line-height: 1em;
  font-weight: 700;
  text-decoration: none;
  text-align: center;

  overflow-wrap: normal;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

  color: var(--color_nav_text_default);
  background-color: var(--color_nav_bg_default);
  border-radius: 5px;
  box-shadow: 2px 2px 4px 0px #444;
  cursor: pointer;
}

button.colorsceme_green,
button.colorsceme_blue,
a.button.colorsceme_green,
a.button.colorsceme_blue,
.colorsceme_green > button,
.colorsceme_blue > button,
.colorsceme_green > a.button,
.colorsceme_blue > a.button,
.infobox.colorsceme_green a.button,
.infobox.colorsceme_blue a.button {
  background-color: var(--color_primary_medium);
}

.nav a.hidden {
  background-color: lightgrey;
  color: grey;
}

.nav a:hover,
.nav a:focus,
.navbutton:hover,
.navbutton:focus,
button:hover,
button:focus,
a.button:hover,
a.button:focus {
  background-color: var(--color_nav_bg_hover);
}

.colorsceme_green > button:hover,
.colorsceme_green > button:focus,
.colorsceme_blue > button:hover,
.colorsceme_blue > button:focus,
.colorsceme_green > a.button:hover,
.colorsceme_green > a.button:focus,
.colorsceme_blue > a.button:hover,
.colorsceme_blue > a.button:focus,
.infobox.colorsceme_green a.button:hover,
.infobox.colorsceme_green a.button:focus,
.infobox.colorsceme_blue a.button:hover,
.infobox.colorsceme_blue a.button:focus {
  background-color: var(--color_nav_bg_hover);
}

.nav .current > a,
.nav .open > a {
  color: var(--color_nav_text_open);
  background-color: var(--color_nav_bg_open);
}

.navblock_0 {
  background-image: url("../images/header_nav_back.jpg");
  background-repeat: repeat-y;
  padding-left: calc(var(--content_padding_horiz) - 0.2em);
  padding-right: calc(var(--content_padding_horiz) - 0.2em);
}

.navblock_0 div {
  min-height: var(--nav_row_height);
  margin-left: 0.2em;
  margin-right: 0.2em;
}

.navblock_0 div a {
  margin-top: 9px;
  margin-bottom: 11px;
}

.navblock_1 div {
  margin-bottom: 10px;
}

#nav_mobile.nav a {
  background-color: var(--color_navsecondary_bg_default);
}

#nav_mobile.nav a:hover,
#nav_mobile.nav a:focus {
  background-color: var(--color_navsecondary_bg_hover);
}

#nav_mobile.nav .current > a,
#nav_mobile.nav .open > a {
  color: var(--color_navsecondary_text_open);
  background-color: var(--color_navsecondary_bg_open);
}

#progress {
  display: grid;
  position: fixed;
  bottom: 10px;
  right: 10px;
  height: var(--button_progress_width);
  width: var(--button_progress_width);
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  pointer-events: none;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

#progress-tooltip {
  display: grid;
  position: absolute;
  right: 110%;
  width: max-content;
  place-items: center;
  padding: 0.2em 0.4em;
  opacity: 0;
  transition: opacity 0.1s;
  -webkit-transition: opacity 0.1s;
  pointer-events: none;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color_green_black);
  background-color: var(--color_yellow_light);
  border: 1px solid var(--color_green_dark);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

#progress-value {
  display: grid;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  border-radius: 50%;
  place-items: center;
  background-color: var(--color_green_light);
}

#progress-value img {
  width: 60%;
  height: auto;
  transform: rotate(-90deg);
}

#progress.show {
  opacity: 1;
  pointer-events: auto;
}

#progress:hover #progress-tooltip,
#progress:active #progress-tooltip {
  opacity: 1;
  pointer-events: auto;
}

#progress:hover #progress-value,
#progress:active #progress-value {
  background-color: var(--color_highlight_yellow);
  text-shadow: 0 0 5px #ffffff;
}

#nav_main ul ul {
  display: none;
}

#main {
  padding-top: calc(var(--content_padding_horiz) * 1.42 * 2);
  padding-left: calc(var(--content_padding_horiz) * 1.42);
  padding-right: calc(var(--content_padding_horiz) * 1.42 * 2);
  padding-bottom: 2em;
  background-color: #fff;
}

.nomargin #main {
  padding-top: calc(var(--content_padding_horiz) * 2);
  padding-left: var(--content_padding_horiz);
  padding-right: var(--content_padding_horiz);
}

.nomargin.gallery #main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  padding-left: calc(var(--content_padding_horiz) * 0.5);
  padding-right: calc(var(--content_padding_horiz) * 0.5);
}

.gallery #main figure,
.gallery #main .splash {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20%;
  min-width: 200px;
}

.gallery #main figure {
  max-width: 40%;
}

.gallery #main > * {
  margin: calc(var(--content_padding_horiz) * 0.5);
  margin-bottom: 1em;
  align-self: center;
}

#margin {
  padding-top: calc(var(--content_padding_horiz) * 3.33 * 2);
  padding-right: calc(var(--content_padding_horiz) * 3.33);
  padding-bottom: 2em;
  background-color: #fff;
}

figure,
figure .img_wrap {
  position: relative;
}

figure .img_wrap {
  background-color: var(--color_primary_light);
}

.gallery #main figure {
  background-color: #ffffff;
  border: 5px solid var(--color_warmwhite);
  box-shadow: 0 0 0 1px #b9b9b9, 3px 3px 8px #8a8a8a;
}

.gallery #main figure img {
  border: none;
  box-shadow: none;
}

.gallery #main figcaption {
  text-align: center;
  border: 1px solid #ffffff;
}

figure img {
  width: 100%;
  height: auto;
}

figure.left {
  float: left;
  margin-right: var(--content_padding_horiz);
}

figure.right {
  float: right;
  margin-left: var(--content_padding_horiz);
}

figure .copyright {
  position: absolute;
  right: 5px;
  bottom: 2px;
  color: white;
  font-size: 12px;
  text-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
}

#main figure img,
#margin figure img {
  border: 1px solid #777;
  box-shadow: 1px 1px 2px 0px #aaa;
}

#main figure.asis img,
#margin figure.asis img {
  border: none;
  box-shadow: none;
}

#margin figure {
  margin-bottom: calc(var(--content_padding_horiz) * 3.33);
}

figcaption {
  margin-top: 4px;
  font-size: 0.9em;
  text-decoration: none !important;
  padding: 0.2em;
  background-color: var(--color_primary_light);
}

figcaption.inline {
  position: absolute;
  top: 1em;
  left: 0;
  padding: 0.5em;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  font-size: 1.33em;
  background-color: #ffffbcc0;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.699);
  max-width: 90%;
}

figure > a {
  text-decoration: none !important;
}

small {
  font-size: 0.8em;
}

#main .adjust_50 {
  width: 50%;
  height: auto;
  max-width: 255px;
}

.splash {
  border: 2px solid var(--color_primary_medium);
  padding: 0.2em;
  text-align: center;
}

#margin .splash {
  margin-top: 2em;
  margin-bottom: 2em;
}

.infobox,
.splash {
  background-color: var(--color_splash_bg);
  box-shadow: 2px 2px 4px 0px rgb(175, 175, 175);
  border-radius: 5px;
  margin-bottom: calc(var(--content_padding_horiz) * 3.33);
}

.infobox h2 {
  font-size: 1.2em;
  margin: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: none;
}

.infobox .content {
  padding: 0.2em;
  border: 1px solid var(--color_primary_dark);
  border-top: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: none;
}

.infobox a.button {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
}

#container_0 figure:first-of-type {
  margin-top: 1em;
}

.infobox figure,
#container_0 .infobox figure {
  margin: 0;
  border: 1px solid black;
}

.infobox figure img,
#container_0 .infobox figure img {
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.infobox figure figcaption,
#container_0 .infobox figure figcaption {
  margin-top: 0;
}

#footer {
  display: inline-block;
  width: 100%;
  padding-top: 1%;
  text-align: center;
  font-size: 0.8em;
}

#footer a {
  color: inherit;
}

/*     */

hr {
  margin-top: 1em;
  margin-bottom: 1em;
  border-top: 3px solid var(--color_primary_dark_1);
}

h1 {
  clear: both;
  margin-bottom: 0.2em;
  translate: 0 -0.2em;
  font-size: 2.2em;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgb(219, 219, 219);
  color: var(--color_primary_dark);
}

h2 {
  clear: both;
  display: inline-block;
  width: 100%;
  margin: 0;
  margin-top: 30px;
  margin-bottom: 10px;
  padding: 0.1em;
  padding-left: 0.2em;

  font-size: 1.6em;
  font-weight: 700;
  color: var(--color_primary_light);
  box-shadow: 1px 1px 2px 0px #aaa;
  text-shadow: 2px 2px 4px #333;

  background-color: var(--color_primary_dark);
  background: linear-gradient(
    to right,
    var(--color_primary_dark),
    var(--color_primary_dark_1)
  );
}

h3 {
  font-size: 1.2em;
}

.gallery #main h2 {
  margin-top: 30px;
}

h2:first-of-type,
.gallery #main h2:first-of-type {
  margin-top: 0px;
}

.main_content_left {
  padding-bottom: 10px;
}

.arrow::before,
a.continue::after,
a.infobox_link::before,
.attachments a::before,
.paragraph_linked a::before,
.link_explained a::before {
  /* content: "\2BC8"; */
  content: url("/templates/feuerkogel/images/arrow.svg");
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  translate: 0 0.25em;
}

a:hover::after,
a:hover::before {
  color: var(--color_highlight_orange);
}

.content img {
  float: left;
  margin-top: 3px;
  margin-right: 15px;
  margin-bottom: 5px;
}

.img img {
  box-shadow: 1px 1px 2px 0px #aaa;
  border: 1px solid #777;
}

div.img_titled {
  float: left;
  margin-right: 8px;
  margin-bottom: 20px;
}

.img_titled img {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

td.img_titled {
  padding-bottom: 1px;
}

.img_titled_text {
  width: 174px;
  height: 32px;
  background-color: var(--color_primary_medium);
  padding: 2px;
}

.img_titled_text .content_copy {
  font-size: 10px;
  margin: 0px;
}

td.main_content_left {
  width: 100%;
}

.facebook {
  padding-top: 5px;
}

.nav_level_01_spacer_after_first,
.nav_level_01_spacer_after_middle {
  width: 13px;
}

.googlemap {
  width: 480px;
  height: 480px;
}

.main_content.empty .googlemap {
  width: 100%;
}

.main_content.empty .content {
  margin: 0px;
}

.googlemap {
  height: 450px;
  width: 100%;
  border: 2px solid #006500;

  box-shadow: 1px 1px 2px 0px #aaa;
}

/* ------------------------------------------------------------ */
/* Popup                                                        */
/* ------------------------------------------------------------ */

#popup_slideshow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
}

#popup_slideshow img {
  border: var(--content_padding_horiz) solid white;
  box-shadow: 10px 10px 10px black;
  max-height: 85vh;
  max-width: 90vw;
  cursor: pointer;
}

#popup_slideshow figure {
  transform-style: preserve-3d;
  animation-duration: 4s;
  transition: transform 3s ease;
  /* transition: all 0.8s ease; */
  /* backface-visibility: hidden; */
}

#popup_slideshow figcaption {
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
}

#slideshow_button_next,
#slideshow_button_previous,
#slideshow_button_close {
  display: none;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  overflow: hidden;
  z-index: 200;
  position: absolute;
  font-size: 4em;
  cursor: pointer;
  border-radius: 50%;
  color: var(--color_green_black);
  background-color: var(--color_green_light);
  opacity: 0.5;
  user-select: none;
}

#popup_slideshow.has_previous #slideshow_button_previous,
#popup_slideshow.has_next #slideshow_button_next,
#slideshow_button_close {
  display: grid;
  align-self: center;
}

#slideshow_button_next::before,
#slideshow_button_previous::before,
#slideshow_button_close::before {
  width: 1em;
  line-height: 1em;
  height: 1em;
  display: grid;
  align-self: center;
}

#slideshow_button_next {
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
}

#slideshow_button_next::before {
  content: url("/templates/feuerkogel/images/arrow.svg");
}

#slideshow_button_previous {
  top: 50%;
  left: 0.5em;
  transform: translateY(-50%);
}

#slideshow_button_previous::before {
  content: url("/templates/feuerkogel/images/arrow.svg");
  transform: rotate(180deg);
}

#slideshow_button_close {
  top: 0.5em;
  right: 0.5em;
}

#slideshow_button_close::before {
  content: url("/templates/feuerkogel/images/close.svg");
}

#slideshow_button_next:hover,
#slideshow_button_previous:hover,
#slideshow_button_close:hover,
#slideshow_button_next:active,
#slideshow_button_previous:active,
#slideshow_button_close:active {
  opacity: 1 !important;
}

#slideshow_counter {
  position: absolute;
  bottom: 0px;
  left: 0px;
  text-align: center;
  padding: 0.2em;
  width: 100%;
  color: var(--color_primary_light);
}

/* -------------------------------------------------------------------------- */
/* MEDIA                                                                      */
/* -------------------------------------------------------------------------- */

/* Tablet hoch (und kleiner) ------------------------------------------------- */
@media only screen and (max-width: 1050px) {
  body {
    --button_progress_width: 60px;
  }

  h1 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1.35em;
  }

  h3 {
    font-size: 1.15em;
  }

  #slideshow_button_next,
  #slideshow_button_previous,
  #slideshow_button_close {
    font-size: 3em;
  }

  #slideshow_button_close {
    top: 2vw;
    right: 2vw;
  }

  #slideshow_button_previous {
    top: initial;
    bottom: 2vw;
    left: 2vw;
    transform: translateY(0);
  }

  #slideshow_button_next {
    top: initial;
    bottom: 2vw;
    right: 2vw;
    transform: translateY(0);
  }

  .gallery #main figure {
    min-width: 120px;
    max-width: 100%;
  }

  figcaption.inline {
    font-size: 1em;
  }
}

/* Phone (und kleiner) ------------------------------------------------- */
@media only screen and (max-width: 520px) {
  #page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav_main"
      "nav_mobile"
      "main"
      "margin"
      "footer";
  }

  #nav_mobile {
    display: flex;
  }

  #nav_secondary {
    display: none;
  }

  #main,
  #margin {
    padding-left: var(--content_padding_horiz);
    padding-right: var(--content_padding_horiz);
  }

  #margin {
    padding-top: 0;
    padding-bottom: var(--content_padding_horiz);
  }

  figure.left,
  figure.right {
    float: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1em;
    width: 100%;
  }

  #main .adjust_50 {
    width: 100%;
    max-width: 100%;
  }

  #slideshow_counter {
    display: none;
  }
}