/* ==================== style/vars.css ==================== */


:root {
  --page-padding: 15px; /* linker und rechter Seitenrand */
  --main-width: 744px; /* Breite des Satzspiegels */
  --margin-bottom: 0.8em; /* Standard-Durchschuss zwischen Absätzen */
  --footer-height: 11em; /* Wert austesten */
}


@media screen {
  :root {
  --bgcolor-body: white;
  --color-primary: #002c62;
  --color-secondary: #a49353;
  --color-text: black;
  --color-text-h: #002c62;
  --color-link: #907545;
  --color-link-hover: #002c62;
  --color-line: #c3c9e4;
  }
}


@media screen and (prefers-color-scheme: dark) {
  :root {
  --bgcolor-body: black;
  --color-primary: #002c62;
  --color-secondary: #a49353;
  --color-text: white;
  --color-text-h: #c3c9e4;
  --color-link: #f5e19d;
  --color-link-hover: #c3c9e4;
  --color-line: #c3c9e4;
  }
}


/* ==================== style/fonts.css ==================== */


/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('Fonts/open-sans-v40-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('Fonts/open-sans-v40-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('Fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('Fonts/open-sans-v40-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-pro-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('Fonts/open-sans-v40-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('Fonts/open-sans-v40-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-pro-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('Fonts/open-sans-v40-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('Fonts/open-sans-v40-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* ==================== style/normalize.css ==================== */


/* Auszüge aus: https://github.com/necolas/normalize.css/blob/master/normalize.css */

html {
  -webkit-text-size-adjust: none; /* nur iPhone */
  text-size-adjust: none;
  font-variant-ligatures: no-common-ligatures;
}

body,
figure {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure, /* Safari iPhone 3, MSIE 8 */
footer,
header,
main, /* wichtig für MSIE bis 11, Android bis 4.3, Opera 12 */
nav,
section {
  display: block;
}

summary {
  display: list-item;
}

a:active {
  outline: 0;
}

b, strong {
  font-weight: 500;
}

small {
  font-size: 82%;
}
small small {
  font-size: 1em;
}

sub,
sup {
  font-size: 82%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.34em;
}
sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-size: inherit;
  margin: 0; /* Firefox 4+, Safari, and Chrome */
}

button::-moz-focus-inner, /* Remove inner padding and border in Firefox 4+ */
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/* ==================== style/html-body.css ==================== */


@media screen {
  html {
    overflow-y: scroll;
  }

  body {
    color: var(--color-text);
    background-color: var(--bgcolor-body);
  }
}

html {
	font-size: 100%; /* damit man die Einheit "rem" verwenden kann */
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 125%;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

.nowrap {
  white-space: nowrap;
}


@media only screen and (max-width: 739px){
	body {
    font-family: 'Open Sans', sans-serif;
    font-size: 105%;
    font-weight: 300;
    line-height: 1.5;
	}
}

@media only screen and (max-width: 479px){
	body {
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    font-weight: 300;
    line-height: 1.5;
	}
}


/* ==================== style/header.css ==================== */


header {
  text-align: center;
  margin-bottom: 2.22rem;
}

header img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* ==================== style/main/main.css ==================== */


@media screen {
  main {
    padding-bottom: 2.2em;
  }

  main > * {
    max-width: var(--main-width);
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    margin-left: auto;
    margin-right: auto;
    }
}

main > * {
  margin-top: 0;
  margin-bottom: var(--margin-bottom);
}

main > *:last-child {
  margin-bottom: 0;
}


.telefon {
  color: var(--color-text-h);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin-top: -0.25em;
  margin-bottom: 0.5em;
}

/* ==================== style/main/h1-h6.css ==================== */


h1 {
  color: var(--color-text-h);
  font-family: 'Open Sans', sans-serif;
  font-size: 2.22em;
  font-weight: 300;
  line-height: 1.25;
  text-align: center;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}


h2 {
  color: var(--color-text-h);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.5em;
}

h3 {
  color: var(--color-text-h);
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

h4, h5, h6 {
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 0;
}


h1 a {
  float: left;
  color: var(--color-secondary);
  padding-right: 2.5%;
}

h1 a:visited {
  color: var(--color-secondary);
}


/* ==================== style/main/a.css ==================== */


main a {
  font-weight: 500;
  color: var(--color-link);
  text-decoration: none;
}
main a:visited {
  color: var(--color-link);
}

@media (hover: hover) {
 main a {
    transition: filter 0.25s;
  }
  main a:hover {
  color: var(--color-link-hover);
  }
  main a:active {
  color: black;
  }
  main a:focus {
  color: var(--color-link-hover);
  }
}

@media (hover: hover) {
.thumbnav-start a {
  color: var(--color-link);
    color: white;
    transition: 0.25s;
  }
.thumbnav-start a:hover {
    color: white;
    background-color: var(--color-primary);
    transform: scale(105%);
  }
.thumbnav-start a:focus {
    transform: scale(100%);
  }
.thumbnav-start a:visited {
    color: white;
  }
}

@media print {
  main a,
  main a:visited,
  main a:hover,
  main a:active {
    color: black;
    text-decoration: none;
  }

  main a[href^="http"]:after { content: " <"attr(href)">"; }
  main .notprinturl a[href^="http"]:after,
  main a[href^="http"].notprinturl:after { content: ""; }
}




/* ==================== style/main/hr.css ==================== */


main > hr {
  max-width: var(--main-width);
  height: 0;
  padding: 0;
  border: none;
  border-top: 1px solid var(--color-link);
  opacity: 0.5;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

@media only screen and (max-width: 774px){
	hr {
  margin-left: 15px;
  margin-right: 15px;
	}
}

@media only screen and (max-width: 567px){
	hr {
  margin-left: 15px;
  margin-right: 15px;
	}
}


/* ==================== style/main/figure-img.css ==================== */


main > figure {
  margin-bottom: 1.2em;
}


main > p > img,
main > figure img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  margin-top: 1em;
  margin-bottom: 1em;
}


main > figure figcaption:not(:empty) {
	color: rgb(128, 128, 128);
  margin-top: 0.4em;
}


/* ==================== style/main/ul-li.css ==================== */


main > ul {
  list-style-type: none;
  margin-bottom: 0.75em;
}

main > ul > p {
  font-weight: 600;
  padding-left: 24px;
  position: relative;
  margin-bottom: 0.25em;
}


main > ul:not([class]) > li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 0.25em;
}

main > ul li:before {
  content: url('../System/Layout/bullet.svg');
  position: absolute;
  left: 3px;
  top: -1px;
  width: 0.66rem;
  height: 0.66rem;
}

main > ul ul {
  list-style-type: none;
  margin-bottom: 0.25em;
  margin-left: -40px;
}

main > ul ul li {
  padding-left: 24px;
  position: relative;
  margin-top: 0.25em;
}


/* ==================== style/main/flipcards.css ==================== */


@media screen {
  .flipcards {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.33;
    max-width: 1048px;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }


  /* ----------------------------- Boxen ----------------------------- */

  .flipcards .flip-card {
    color: white;
    line-height: 335px;
    height: 335px;
  }


  .flipcards .flip-card-front {
    text-align: center;
    background-color: var(--color-secondary);
  }

  .flipcards .flip-card-front span {
    display: inline-block;
    font-weight: normal;
    font-size: 27px;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    padding: 8px 15px 15px 15px; /* 1. und ggf. 3. Wert steuern die vertikale Ausrichtung */
  }

  .flipcards .flip-card-back {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    background-color: var(--color-primary);
    padding: 10px 15px;
    overflow: auto;
  }

  .flipcards .flip-card-back h3 {
    font-size: 1.33em;
    font-weight: 400;
    line-height: 1.25;
    color: inherit;
    margin: 0 0 0.25em 0;
  }

  .flipcards .flip-card-back a {
    font-weight: 500;
    color: #f5e19d;
  }

  .flipcards .flip-card-back ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
@media (hover: hover) {
  .flipcards .flip-card-back a {
    transition: filter 0.25s;
  }
  .flipcards .flip-card-back a:hover {
  color: white;
  }
  .flipcards .flip-card-back a:active {
  color: white;
  }
  .flipcards .flip-card-back a:focus {
  color: #f5e19d;
  }
}

  .flipcards .flip-card-back li:not(:first-child) {
    padding: 3px 0;
    border-top: 1px dashed gray;
    margin: 3px 0;
  }
}

@media print {
  .flipcards .flip-card-front {
    display: none;
  }
}


/* ----------------------------- Grid ----------------------------- */

@media only screen and (min-width: 1079px) { /* 1079px = 15px Seitenrand + 1049px Gesamtbreite + 15px Seitenrand */
  .flipcards {
    --spalten: 3;
    --abstand: 2%;
  }
  .flipcards > *:nth-child(3n) {
    margin-right: 0;
  }
}

@media only screen and (max-width: 1078px) and (min-width: 817px)  { /* 817px = 15px Seitenrand + 787px Gesamtbreite + 15px Seitenrand */
  .flipcards {
    --spalten: 2;
    --abstand: 2%;
  }
  .flipcards > *:nth-child(2n) {
    margin-right: 0;
  }
}

@media (max-width: 816px), print {
  .flipcards {
    --spalten: 1;
    --abstand: 1em;
  }
  .flipcards > *:nth-child(1n) {
    margin-right: 0;
  }
}


/* ==================== style/main/address.css ==================== */


address {
  font-style: normal;
}


address h3 {
  font-size: inherit;
  font-weight: 700;
  margin-top: 0;
}

@media (min-width: 555px) {
  address {
    --spalten: 2;
    --abstand: 3%;
  }
  address > *:nth-child(2n) {
    margin-right: 0;
  }
}


@media (max-width: 554px) {
  address {
    --spalten: 1;
    --abstand: var(--margin-bottom);
  }
  address > *:nth-child(1n) {
    margin-right: 0;
  }
}


/* ==================== style/footer.css ==================== */


/* Footer unten ankleben */

html {
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
}

main {
  padding-bottom: 13.5em; /* Footer: 11em + eigener Abstand: 2.5em */
}


footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

@media print {
  html {
    height: auto;
  }
  body {
    min-height: 0;
    position: static;
  }
}

/* ENDE Footer unten ankleben */


footer {
  color: white;
  background-color: rgb(0, 45, 98);
  min-height: 9.5em;
  padding-top: 1.5em;
}

@media print {
  footer {
    display: none;
  }
}


footer nav {
  font-size: 1.15em;
  max-width: 744px;
  padding: 0 2.5%;
  margin: 0 auto;
}



footer a {
  color: white;
  text-decoration: none;
  display: inline-block;
}

footer a:visited {
  color: white;
}

@media (hover: hover) {
  footer a:hover,
  footer a:active,
  footer a:focus {
    text-decoration: underline;
  }
}

footer a:not(:first-child) {
  margin-left: 1.5em;
}

/* ---------------------- Counter ------------------------ */

footer {
  background-image: url('../counter/count.php');
  background-repeat: no-repeat;
}



/* ==================== style/grid.css ==================== */


.grid {
  display: block; /* vorsichtshalber */
}

ul.grid,
ol.grid {
  list-style-type: none;
  padding-left: 0;
}

.grid:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}


.grid > * {
  float: left;
  box-sizing: border-box;
  width: calc((100% - var(--abstand, 0.67em) * (var(--spalten, 1) - 1)) / var(--spalten, 1));
  margin: 0 var(--abstand, 0) var(--abstand, 0.67em) 0;
}


/* Anwendersyntax:

.grid {
  --spalten: 3;
  --abstand: 2.126%;
}

.grid > *:nth-child(3n) { 3n = var(--spalten) + 'n'
  margin-right: 0;
}

*/


/* ==================== style/flipcard.css ==================== */


/* The flip card container - set the width and height to whatever you want.
We have added the border property to demonstrate that the flip itself goes
out of the box on hover (remove perspective if you don't want the 3D effect */

@media screen {
  .flip-card {
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    cursor: pointer;
  }

  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner,
  .flip-card:focus .flip-card-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }

  /* flip the back side */
  .flip-card-back {
    transform: rotateY(180deg);
  }
}

/* inspired by: https://www.w3schools.com/howto/howto_css_flip_card.asp */