/* allgäuLab – static stylesheet (derived from the YAMB/TYPO3 "sunflower" template) */

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

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

body {
  margin: 0;
  color: #444;
  font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
  font-size: 1em;
}

img { max-width: 100%; height: auto; border: 0; }

h1, h2, h3 {
  margin: 0;
  color: #333;
  font-weight: normal;
  line-height: 120%;
}

a { color: #636363; }
a:hover { text-decoration: none; }

/* static-site notice */
.notice {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #5c4a00;
  background: #fff4c2;
  border-bottom: 1px solid #e6d27a;
}
.notice a { color: inherit; }

/* structure */
.container {
  max-width: 960px;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 1px 1px rgba(88, 88, 88, 0.2);
}

.site-header { padding-bottom: 10px; margin-bottom: 20px; }

.logo { display: inline-block; margin-left: 30px; }
.logo img { display: block; }

/* navigation */
.topnav ul {
  display: flex;
  margin: 1em 0 0;
  padding: 0 0 0 5%;
  list-style: none;
  background: #e6e6e6;
}
.topnav a {
  display: block;
  padding: 0 1.5em;
  line-height: 40px;
  font-size: 14px;
  color: #636363;
  text-decoration: none;
  border-left: 1px solid #fff;
  transition: background .2s;
}
.topnav li:last-child a { border-right: 1px solid #fff; }
.topnav a:hover { background: #ccc; transition: none; }
.topnav a[aria-current="page"] { background: #ccc; }

/* slideshow (CSS-only crossfade, replaces FlexSlider) */
.slider {
  position: relative;
  width: 90%;
  margin: 2.5em auto 0;
  border: 4px solid #e6e6e6;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 960 / 400;
}
.slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slide-fade 18s infinite;
}
/* offset by -1s so the first slide is already fully shown on load */
.slider img:nth-child(1) { animation-delay: -1s; }
.slider img:nth-child(2) { animation-delay: 5s; }
.slider img:nth-child(3) { animation-delay: 11s; }

@keyframes slide-fade {
  0%      { opacity: 0; }
  4%, 33% { opacity: 1; }
  37%     { opacity: 0; }
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slider img { animation: none; }
  .slider img:first-child { opacity: 1; }
}

/* main content */
main {
  width: 90%;
  margin: 0 5%;
  min-height: 200px;
  font-size: .91em;
  line-height: 20px;
}
main h1 { margin-bottom: 20px; font-size: 2em; }
main h3 { font-size: 1.17em; }
main p { margin: 0 0 20px; }

.block { margin-bottom: 30px; }
.block::after { content: ""; display: table; clear: both; }

/* person: image left, text alongside without wrapping */
.person img { float: left; width: 150px; margin-right: 20px; }
.person .text { margin-left: 170px; }

/* news teaser */
.news h3 { margin-bottom: 0; }
.news time { display: block; margin: 1em 0; }

/* image floated right inside text */
.pic-right { float: right; margin: 0 0 10px 20px; }

/* contact */
.contact-list { margin: 0 0 20px; padding: 0; list-style: none; }
.contact-list li { margin-bottom: 20px; }

/* footer */
footer {
  clear: both;
  padding: 10px 20px 10px 5%;
  font-size: 12px;
  line-height: 20px;
  color: #797979;
  background: #e6e6e6;
  border-radius: 0 0 10px 10px;
}

/* tablets */
@media (max-width: 1024px) {
  .container { width: 95%; }
}

/* smartphones */
@media (max-width: 768px) {
  .container { width: 94%; }
  .slider { margin-top: 20px; }
  .topnav a { line-height: 35px; }
  main h1 { font-size: 1.6em; }
  main h3 { font-size: 1.3em; }
}

@media (max-width: 480px) {
  .container { width: 95%; }
  .logo { margin-left: 15px; }
  .topnav ul { justify-content: center; padding: 0; border-radius: 3px; }
  .person img { float: none; display: block; margin: 0 0 10px; }
  .person .text { margin-left: 0; }
  .pic-right { width: 100px; }
}

@media print {
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  .notice, .topnav, .slider { display: none; }
  a { text-decoration: underline; }
}