/* werd' schlau über'n Pfau - layout inspiriert von klassischen neocities-templates */
/* palette: #0E3B40 dunkel, #14666A teal, #1F7A74 pfau-blau, #2A9D8F irisierend, #C9A227 gold, #8C6A2F bronze, #E9E4C9 creme */

body {
  background-image: url(assets/pfauBG.svg);
  background-size: 250px;
  background-repeat: repeat;
  font-family: 'Nunito', sans-serif;
  margin: 0;
  background-color: #14666A;
}

ul { list-style-image: url('assets/featherbullet.svg'); text-align: left; }

img { max-width: 100%; }

.content-wrapper {
  border: 3px double #0E3B40;
  margin: auto;
  width: 960px;
  position: relative;
  padding: 3px;
  z-index: 4;
}

.header {
  position: relative;
  height: auto;
  margin: 3px auto;
  padding: 10px;
  border-radius: 20px;
  text-align: center;
  background: #0E3B40;
  border: 3px double #C9A227;
}

.header img { max-width: 100%; height: auto; border-radius: 12px; }

/* navigation */
.navbar {
  height: 40px;
  background-color: #C9A227;
  border-radius: 10px;
  width: 100%;
}

.navbar ul {
  display: flex;
  padding: 5px;
  text-align: center;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

.navbar ul a {
  color: #0E3B40;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
}

.navbar ul a:hover {
  background-color: #E9E4C9;
  color: #0E3B40;
}

.navlist { display: flex; justify-content: space-evenly; padding: 0; margin: 0; list-style-type: none !important; }

.navlink { width: 100%; color: #0E3B40; font-weight: 800; font-size: 17px; text-decoration: none; padding: 6px 30px; display: block; }
.navlink:hover { background: #E9E4C9; border-radius: 8px; }

.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  position: absolute; min-width: 100%; z-index: 1000;
  top: 100%; left: 0;
  height: 0; overflow: hidden;
  transition: 0.4s steps(4, end);
  display: flex; flex-direction: column; text-align: center;
}
.dropdown-content a {
  color: #0E3B40; text-decoration: none; font-size: 17px; font-weight: 700;
  background-color: #C9A227; padding: 6px 18px; min-width: 130px; margin: 0;
}
.dropdown:hover .dropdown-content { height: auto; }

.main-wrapper { position: relative; }

/* spalten */
.sidebar-left, .main, .sidebar-right { display: inline-block; }
.sidebar-left, .sidebar-right { width: 175px; text-align: center; }
.sidebar-left { position: absolute; }
.sidebar-right { margin-left: 15px; position: absolute; left: 785px; }
.main { margin-left: 190px; width: 575px; }

/* boxen */
* { box-sizing: border-box; }

.box {
  border: 3px double #0E3B40;
  background: #E9E4C9;
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
  text-align: center;
}

.box2, .box3 {
  border: 3px double #0E3B40;
  background: #1F7A74;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}

.box2 h3, .box3 h3, .box2 h2, .box3 h2 { color: #E9E4C9; }
.box2, .box3 { color: #E9E4C9; }
.box2 .inner, .box3 .inner { color: #0E3B40; background: #E9E4C9; border-radius: 8px; }

.titlebar {
  text-align: center;
  position: relative;
  max-width: 250px;
  height: 44px;
  display: block;
  margin: 0 auto;
  background: #0E3B40;
  border: 2px solid #C9A227;
  border-radius: 22px;
  color: #C9A227;
}

.centered {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  white-space: nowrap;
}

.centeredtop { position: absolute; left: 50%; transform: translateX(-50%); display: block; }

/* bilder */
.box img, .box2 img, .box3 img { max-width: 100%; height: auto; }

.pfauimg {
  border: 3px solid #1F7A74;
  max-width: 100%;
  height: auto;
  float: left;
  margin: 10px;
  border-radius: 6px;
}

.right-image { float: right; clear: right; margin-left: 8px; }
.left-image { clear: left; float: left; margin-right: 15px; }

figure { display: flex; flex-flow: column; padding: 5px; max-width: 500px; margin: auto; }

figcaption {
  background-color: #0E3B40;
  color: #E9E4C9;
  font-size: 15px;
  padding: 5px;
  text-align: center;
  max-width: 500px;
  border-radius: 0 0 8px 8px;
}

/* footer */
.footer {
  border: 3px double #C9A227;
  padding: 20px;
  text-align: center;
  background: #0E3B40;
  color: #E9E4C9;
  margin-top: 40px;
  border-radius: 10px;
}

hr { width: 85%; border-bottom: 3px double #8C6A2F; border-top: none; }

.inner { padding: 0.25em 1em 0.3em 1em; font-size: 1.05em; }
.inner img { max-width: 100%; height: auto; }

.row { display: flex; column-gap: 15px; }
.column { flex: 50%; }

/* galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 10px;
  text-align: center;
}
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid #1F7A74; border-radius: 6px; }
.gallery .caption { font-size: 0.85em; padding: 4px; background: #0E3B40; color: #E9E4C9; border-radius: 6px; }

/* mobilitaet */
.hidden-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 800px) {
  .hidden-mobile { display: none !important; }
  .show-mobile { display: flex; max-width: 90%; flex-wrap: wrap; margin: auto; }
  .content-wrapper, .main-wrapper { max-width: 100%; }
  .main { display: grid; grid-template-columns: 1fr; max-width: 90%; flex-wrap: wrap; margin: auto; }
  .navbar ul { flex-wrap: wrap; font-size: 15px; }
  .row, .column { display: grid; grid-template-columns: 1fr; }
  .box, .box2, .box3 { display: grid; grid-template-columns: 1fr; }
  .titlebar { display: none; }
  .gallery { display: block; }
}

/* scrollbar + highlights */
html { overflow: scroll; overflow-x: hidden; }
::-webkit-scrollbar { width: 0; background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; }
::selection { background: #2A9D8F; color: #FFFFFF; }
a { text-decoration: none; color: #14504F; font-weight: 700; }
a:hover { color: #8C6A2F; }

/* pfauen-cursor */
body, a, button, .navlink {
  cursor: url("assets/peacock-small.cur"), auto;
}