/*
 * Ergaenzungen zum uebernommenen Bestand.
 *
 * Die Dateien bootstrap.min.css, joomla-fontawesome.min.css,
 * font-awesome-v4-shims.min.css, template.css, preset3.css, custom.css und
 * galerie.css stammen unveraendert von der bisherigen Seite. Hier steht nur,
 * was dort aus Einstellungen, von fremden Servern oder aus Skripten kam:
 *
 *   SCHRIFT        Open Sans, jetzt von der eigenen Seite statt von Google
 *   EINSTELLUNGEN  was das alte Template aus seinen Optionen erzeugt hat
 *   BILDERLAUF     wechselnde Bilder auf der Startseite
 *   EINBLENDEN     sanftes Erscheinen beim Scrollen
 *   LICHTKASTEN    grosse Ansicht der Galeriebilder
 *   FORMULAR       Kontaktformular
 */

/* SCHRIFT */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/open-sans-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/open-sans-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/open-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/open-sans-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/open-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url(../fonts/open-sans-latin-600-italic.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/open-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/open-sans-latin-700-italic.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/open-sans-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url(../fonts/open-sans-latin-800-italic.woff2) format("woff2"); }

/* EINSTELLUNGEN */

body { font-family: "Open Sans", sans-serif; font-weight: 300; }
h1 { font-family: "Open Sans", sans-serif; font-weight: 800; }
h2 { font-family: "Open Sans", sans-serif; font-weight: 600; }
h3, h4 { font-family: "Open Sans", sans-serif; font-weight: normal; }
h5, h6 { font-family: "Open Sans", sans-serif; font-weight: 600; }
.sp-megamenu-parent { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; }

@media (min-width: 1400px) {
	.container { max-width: 1140px; }
}

#sp-top-bar { background-color: #f5f5f5; color: #585858; }
#sp-bottom { background-color: #f5f5f5; padding: 100px 0; }

/* Das Aufklappmenue richtet sich an der Zeile aus, nicht an seiner Spalte.
   Frueher setzte das ein Skript, hier genuegt die Angabe im Stylesheet. */
#sp-header .row { position: relative; }
#sp-menu,
#sp-menu > .sp-column { position: static; }

/* BILDERLAUF */

.gp-bilderlauf { position: relative; overflow: hidden; line-height: 0; }
.gp-bilderlauf img { display: block; width: 100%; height: auto; }
.gp-bilderlauf img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; }
.gp-bilderlauf img { transition: opacity 1.2s ease; }
.gp-bilderlauf.gp-laeuft img { opacity: 0; }
.gp-bilderlauf.gp-laeuft img.gp-vorn { opacity: 1; }

/* EINBLENDEN */

/* Versteckt wird nur, wenn das Skript laeuft. Ohne Skript bleibt alles sichtbar. */
.gp-skript [data-aos] { opacity: 0; transition: opacity 1s ease, transform 1s ease; }
.gp-skript [data-aos="fade-up"] { transform: translate3d(0, 60px, 0); }
.gp-skript [data-aos].gp-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.gp-skript [data-aos] { opacity: 1; transform: none; transition: none; }
	.gp-bilderlauf img { transition: none; }
}

/* LICHTKASTEN */

.gp-lichtkasten { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; }
.gp-lichtkasten[hidden] { display: none; }
.gp-lichtkasten figure { margin: 0; max-width: 92vw; max-height: 92vh; text-align: center; }
.gp-lichtkasten img { max-width: 92vw; max-height: 84vh; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); cursor: default; }
.gp-lichtkasten figcaption { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1px; padding-top: 10px; }
.gp-lichtkasten button { position: fixed; border: 0; background: transparent; color: rgba(255, 255, 255, 0.85); font-size: 40px; line-height: 1; padding: 10px 18px; cursor: pointer; }
.gp-lichtkasten button:hover,
.gp-lichtkasten button:focus { color: #fff; }
.gp-lichtkasten .gp-zu { top: 8px; right: 8px; }
.gp-lichtkasten .gp-zurueck { left: 4px; top: 50%; transform: translateY(-50%); }
.gp-lichtkasten .gp-weiter { right: 4px; top: 50%; transform: translateY(-50%); }
body.gp-lichtkasten-offen { overflow: hidden; }

#sp-galerie { padding: 0 0 60px; }
.speasyimagegallery-row { margin: 0 -10px; }
.speasyimagegallery-row > div { float: left; padding: 10px; box-sizing: border-box; }
.speasyimagegallery-col-xs-12 { width: 100%; }
.speasyimagegallery-col-xs-6 { width: 50%; }
@media (min-width: 768px) {
	.speasyimagegallery-col-sm-4 { width: 33.3333%; }
}
@media (min-width: 992px) {
	.speasyimagegallery-col-md-4 { width: 33.3333%; }
	.speasyimagegallery-col-md-3 { width: 25%; }
}

/* FORMULAR */

/* Koederfeld gegen automatisierte Einsendungen: fuer Menschen unsichtbar,
   aber nicht per display:none, weil manche Programme das erkennen. */
.gp-nicht-ausfuellen { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-form .control-group { margin-bottom: 15px; }
.contact-form legend { font-size: 1.3em; margin-bottom: 10px; }
.contact-form .star,
.contact-form .red { color: #e10000; }