@charset "UTF-8";
body, input, select {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a:link, a:visited, a:hover {
  color: #333;
  text-decoration: none;
}

.contrast, a.contrast:link, a.contrast:visited, a.contrast:hover {
  color: #FFF;
}

a:hover, a:active {
  text-decoration: underline;
}

h1, h2 {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}

a.button img {
  width: 15px;
  height: 20px;
}

a.button:hover img, a.button:active img {
  box-shadow: inset 0 0 0 2px #767676;
}

input[type="image"]:not([disabled]) {
  width: 15px;
  height: 20px;
}

input[type="image"]:not([disabled]):hover, input[type="image"]:not([disabled]):active {
  box-shadow: inset 0 0 0 2px #767676;
}

a.buttonLeft {
  position: relative;
  height: 20px;
  width: 15px;
}

a.buttonLeft::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="9" height="14"><g fill="%23767676"><rect x="5" y="0" width="4" height="4"/><rect x="5" y="10" width="4" height="4"/><rect x="0" y="5" width="4" height="4"/></g></svg>');
  position: relative;
}

a.buttonLeft:hover, a.buttonLeft:active {
  box-shadow: inset 0 0 0 2px #767676;
}

a.buttonLeft::before {
  left: 3px;
  top: 3px;
}

a.buttonRight {
  position: relative;
  height: 20px;
  width: 15px;
}

a.buttonRight::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="9" height="14"><g fill="%23767676"><rect x="0" y="0" width="4" height="4"/><rect x="0" y="10" width="4" height="4"/><rect x="5" y="5" width="4" height="4"/></g></svg>');
  position: relative;
}

a.buttonRight:hover, a.buttonRight:active {
  box-shadow: inset 0 0 0 2px #767676;
}

a.buttonRight::before {
  left: 3px;
  top: 3px;
}

a.buttonUp {
  position: relative;
  height: 20px;
  width: 20px;
  box-shadow: inset 0 0 0 0px #767676;
}

a.buttonUp::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="9"><g fill="%23767676"><rect x="5" y="0" width="4" height="4"/><rect x="0" y="5" width="4" height="4"/><rect x="10" y="5" width="4" height="4"/></g></svg>');
  position: relative;
}

a.buttonUp:hover, a.buttonUp:active {
  box-shadow: inset 0 0 0 2px #767676;
}

a.buttonUp::before {
  left: 2.5px;
  top: 3.5px;
}

a.buttonDown {
  position: relative;
  height: 20px;
  width: 20px;
  box-shadow: inset 0 0 0 0px #767676;
}

a.buttonDown::before {
  content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="9"><g fill="%23767676"><rect x="0" y="0" width="4" height="4"/><rect x="10" y="0" width="4" height="4"/><rect x="5" y="5" width="4" height="4"/></g></svg>');
  position: relative;
}

a.buttonDown:hover, a.buttonDown:active {
  box-shadow: inset 0 0 0 2px #767676;
}

a.buttonDown::before {
  left: 2.5px;
  top: 3.5px;
}

.nestled {
  margin-left: 5px;
}

.message .error, .message.error {
  color: red;
}

.message .success, .message.success {
  color: green;
}

input {
  height: 22px;
  width: 200px;
}

@media only screen and (max-width: 350px) {
  label, input {
    width: 100%;
  }
}

select {
  height: 28px;
  width: 208px;
}

select.year {
  width: 62.66667px;
}

textarea {
  font-size: 1.1em;
  height: 100px;
  width: 202px;
}

input:focus-visible, textarea:focus-visible {
  outline-color: #767676;
}

/*input[type=button], input[type=submit], input[type=reset], input[type=file] {
	cursor: pointer;
}*/
label:has(~ *:required)::after {
  content: "*";
}

ul.float {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

ul.float > li {
  align-items: center;
  display: flex;
  justify-content: center;
  list-style: none;
}

@media only screen and (max-width: 600px) {
  ul.float {
    gap: 3px;
  }
}

.with-text-on {
  position: relative;
}

.with-text-on > .text-to-show {
  color: #FFF;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.5);
  bottom: 8px;
  display: inline;
  left: 0;
  margin-right: 8px;
  padding: 3px;
  position: absolute;
  z-index: 1;
}

div.oversize {
  overflow-x: scroll;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  box-sizing: border-box;
}

table thead {
  text-align: left;
}

table th, table td {
  padding: 2px;
}

body:not(#satellite) {
  padding: 10px;
  background: #FFF;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 790px;
}

@media only screen and (max-width: 600px) {
  body:not(#satellite) {
    padding: 3px;
  }
}

body:not(#satellite) main {
  max-width: calc(100% - 190px);
}

@media only screen and (max-width: 600px) {
  body:not(#satellite) main {
    max-width: 100%;
  }
}

header {
  background: #FFF;
  width: 100%;
}

.flexWrapper {
  background: #F0F0F0;
  display: flex;
  max-width: 100%;
}

.flexWrapper > * {
  flex: 1 100%;
}

@media only screen and (max-width: 600px) {
  .flexWrapper {
    flex-wrap: wrap;
  }
}

nav {
  display: flex;
  max-width: 190px;
}

@media only screen and (max-width: 600px) {
  nav {
    max-width: unset;
  }
}

main {
  display: flex;
  flex: 3 0;
}

aside {
  display: flex;
  max-width: 190px;
}

@media only screen and (max-width: 790px) {
  aside {
    display: none;
  }
}

article {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.3em;
  width: calc(100% - 20px);
}

@media only screen and (max-width: 600px) {
  article {
    padding: 3px;
    width: calc(100% - 6px);
  }
}

article #map {
  height: 300px;
}

article p {
  margin: 0;
}

article p.articleSubHeading {
  font-weight: 600;
}

article p.articleSubHeading, article p.note {
  margin: 0;
}

header {
  display: flex;
  flex-flow: row wrap;
  gap: 3px;
}

header .pageLogo {
  align-self: center;
  flex: 1 0;
  max-width: 190px;
  min-width: 190px;
}

header .pageLogo a {
  padding: 10px;
  font: 28px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
}

header .pageLogo a .pink {
  color: #FF009A;
}

header .headerMain {
  padding: 10px;
  font-weight: 600;
  align-self: center;
  display: flex;
  flex: 2 0;
  flex-direction: column;
  gap: 10px;
}

header ul.pageFunctions {
  padding: 10px;
  align-self: flex-end;
  display: flex;
  flex: 1 0;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: 0;
  min-width: 190px;
}

header ul.pageFunctions li {
  align-items: center;
  display: flex;
  list-style: none;
}

header ul.pageFunctions li a {
  font-weight: 600;
}

header .registerAndLogin {
  padding: 10px;
  align-self: flex-end;
  display: flex;
  flex: 1 0;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: flex-end;
  min-width: 66%;
}

header .registerAndLogin > * {
  align-items: center;
  display: flex;
}

header .registerAndLogin span > * {
  display: flex;
}

header .registerAndLogin a {
  font-weight: 600;
}

header .registerAndLogin form {
  align-self: flex-end;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: 0;
  min-width: 190px;
}

header .registerAndLogin form .formFieldPasswordWithButton {
  display: flex;
}

header .registerAndLogin form input {
  height: 14px;
  width: 100px;
}

header .registerAndLogin form .formLabel {
  font-weight: 600;
}

@media only screen and (max-width: 600px) {
  header .pageLogo, header .headerMain {
    flex: unset;
    min-width: unset;
  }
  header .pageLogo a, header .headerMain, header ul.pageFunctions {
    padding: 3px;
  }
  header .headerMain {
    gap: 3px;
  }
  header .headerMain {
    display: none;
  }
  header .headerMain.hasMessage {
    display: flex;
  }
  header .headerMain .pageAbstract {
    display: none;
  }
}

nav .pad {
  background-color: #00CCFF;
  display: flex;
  flex-direction: column;
  -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 L 150,0 L 170,20 L 170,50 L 0,50 Z"/></svg>');
  mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 L 150,0 L 170,20 L 170,50 L 0,50 Z"/></svg>');
  object-fit: cover;
  position: relative;
  top: 0;
  z-index: 0;
  height: 100%;
  justify-content: flex-end;
  width: 100%;
}

nav .pad.active {
  background-color: #FF009A;
}

nav .pad > * {
  padding: 10px;
  font-weight: 600;
  display: flex;
}

@media only screen and (max-width: 600px) {
  nav .pad {
    justify-content: center;
    -webkit-mask-image: unset;
    mask-image: unset;
  }
  nav .pad > * {
    padding: 3px;
  }
}

nav > ul {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  width: 100%;
}

nav > ul > li {
  width: 170px;
  height: 50px;
  display: flex;
  list-style: none;
}

@media only screen and (max-width: 600px) {
  nav > ul {
    padding: 3px;
    flex-direction: row;
    flex-flow: row wrap;
    gap: 3px;
  }
  nav > ul > li {
    height: 30px;
    max-width: 170px;
    width: calc(33.33333% - 2px);
  }
}

nav .smallPad {
  font-weight: 600;
  align-items: center;
  background-color: #00CCFF;
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
}

nav .smallPad.active {
  background-color: #FF009A;
}

@media only screen and (max-width: 600px) {
  nav .navigation {
    height: unset;
    min-width: 100%;
  }
}

nav .navigation > div {
  display: flex;
  flex: 1 0;
  gap: 10px;
  height: 50px;
  width: 100%;
}

@media only screen and (max-width: 600px) {
  nav .navigation > div {
    flex-direction: column;
    gap: 3px;
    height: unset;
  }
}

nav .navigation > div .pagination {
  align-items: center;
  display: flex;
  flex: 1 0;
  flex-direction: column;
  justify-content: center;
  max-width: 50px;
}

nav .navigation > div .pagination.desktop {
  background: #CCCCCC;
}

nav .navigation > div .pagination.mobile {
  display: none;
}

@media only screen and (max-width: 600px) {
  nav .navigation > div .pagination.desktop {
    display: none;
  }
  nav .navigation > div .pagination.mobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: unset;
    min-height: 30px;
    min-width: 100%;
  }
}

nav .navigation > div .pagination > * {
  display: flex;
}

nav .navigation > div .pagination > i {
  height: 20px;
  width: 15px;
}

nav .navigation > div > ul {
  display: flex;
  flex: 1 0;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

nav .navigation > div > ul > li {
  display: flex;
  height: 20px;
  list-style: none;
}

@media only screen and (max-width: 600px) {
  nav .navigation > div > ul {
    flex-direction: row;
    gap: 3px;
    justify-content: space-between;
  }
  nav .navigation > div > ul > li {
    flex: 1 0;
    height: 30px;
  }
}

article .showcaseRecentRegistered .heading {
  color: #FFF;
  font-weight: 600;
  align-items: center;
  background-color: #00CCFF;
  display: flex;
  min-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

article .showcaseRecentRegistered ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

article .showcaseRecentRegistered ul li {
  display: flex;
  gap: 10px;
  min-height: 48px;
  list-style: none;
}

article .showcaseRecentRegistered ul li a {
  display: flex;
  gap: 10px;
}

article .showcaseRecentRegistered ul li a > img {
  max-width: 48px;
  max-height: 48px;
  height: auto;
  width: auto;
  box-sizing: border-box;
  width: 48px;
}

article .showcaseRecentRegistered ul li a:hover > img, article .showcaseRecentRegistered ul li a:active > img {
  border: solid 0px #767676;
}

article .showcaseRecentRegistered ul li > p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

article .showcaseRecentRegistered ul li > p .title {
  font-weight: 600;
}

article .showcaseRegister {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .showcaseRegister .heading {
  color: #FFF;
  font-weight: 600;
  align-items: center;
  background-color: #00CCFF;
  display: flex;
  min-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

article .showcaseRegister .heading a {
  color: #FFF;
}

article .showcaseRegister p {
  display: flex;
  margin: 0;
}

article .showcaseRegister .register {
  justify-content: flex-end;
}

article .showcaseRegister .register > * {
  align-items: center;
  display: flex;
}

.pinInfo {
  align-items: flex-start;
  display: flex;
  font-size: 11px;
  gap: 10px;
  max-width: 200px;
}

.pinInfo .description {
  font-weight: normal;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pinInfo img {
  max-height: 55px;
  max-width: 55px;
}

.pinInfo h5 {
  font-size: unset;
  margin: 0;
}

.pinInfo h5 .addition {
  font-weight: normal;
}

article .recentlyAddedAlbums {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .recentlyAddedAlbums ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

article .recentlyAddedAlbums ul li {
  list-style: none;
}

article .recentlyAddedAlbums ul li > a {
  display: flex;
  gap: 10px;
}

article .recentlyAddedAlbums ul li > a > p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

article .recentlyAddedAlbums ul li > a > p .title {
  font-weight: 600;
}

article .recentlyAddedAlbums ul li > a:hover > img, article .recentlyAddedAlbums ul li > a:active > img {
  border: solid 2px #767676;
}

article .recentlyAddedAlbums ul li > a > img {
  max-height: 100px;
  height: auto;
  width: auto;
  box-sizing: border-box;
}

article .yearList a {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

article .yearList a:hover, article .yearList a:active {
  box-shadow: inset 0 0 0 2px #767676;
}

article .yearList ul li {
  font-weight: 600;
  width: 50px;
  height: 50px;
  border: solid 1px #CCCCCC;
}

article .yearOverview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .yearOverview .oversize {
  border: 1px solid #767676;
}

article .yearFaces ul li {
  width: 48px;
  height: 48px;
}

article .yearFaces ul li > a {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

article .yearFaces ul li > a:hover img, article .yearFaces ul li > a:active img {
  border: solid 2px #F0F0F0;
}

article .yearFaces ul li > a img {
  max-width: 48px;
  max-height: 48px;
  height: auto;
  width: auto;
  box-sizing: border-box;
  display: flex;
}

article .alphabeticalList {
  line-height: 1.4em;
}

article .alphabeticalList a {
  font-weight: 600;
}

article .alphabeticalList > ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
}

article .alphabeticalList > ul > li {
  display: flex;
  list-style: none;
}

article .alphabeticalList > ul > li > span {
  font-weight: 600;
  display: flex;
  max-width: 20px;
  min-width: 20px;
}

article .alphabeticalList > ul > li > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

article .alphabeticalList > ul > li > ul > li {
  float: left;
  padding-left: 5px;
}

article .alphabeticalList > ul > li > ul > li:not(:last-child)::after {
  content: " – ";
}

article .imprint {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .basicInformation {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .basicInformation > div, article .basicInformation > div p {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

article .basicInformation > div p:has(*), article .basicInformation > div p p:has(*) {
  flex-flow: nowrap;
}

article .basicInformation > div label, article .basicInformation > div p label {
  font-weight: 600;
  width: 200px;
}

article .basicInformation > div label.asHeading, article .basicInformation > div p label.asHeading {
  width: 100%;
}

article .basicInformation > div.indent-1, article .basicInformation > div p.indent-1 {
  margin-left: 20px;
}

article .basicInformation > div.indent-1 > label, article .basicInformation > div p.indent-1 > label {
  width: 180px;
}

article .basicInformation > div.indent-2, article .basicInformation > div p.indent-2 {
  margin-left: 40px;
}

article .basicInformation > div.indent-2 > label, article .basicInformation > div p.indent-2 > label {
  width: 160px;
}

article .basicInformation > div > *, article .basicInformation > div p > * {
  display: flex;
}

article .basicInformation > div ul, article .basicInformation > div p ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

article .basicInformation > div ul > li, article .basicInformation > div p ul > li {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  list-style: none;
}

article .basicInformation > div .percent, article .basicInformation > div p .percent {
  display: inline;
  text-align: right;
  width: 30px;
}

article .basicInformation > div .number, article .basicInformation > div p .number {
  display: inline;
  text-align: right;
  width: 60px;
}

article .basicInformation > div .graph, article .basicInformation > div p .graph {
  background: #FFF;
  border: solid 0px #767676;
  display: block;
  height: 10px;
  position: relative;
  width: 100px;
}

article .basicInformation > div .graph > *, article .basicInformation > div p .graph > * {
  background: #00CCFF;
  display: inherit;
  height: inherit;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

article .basicInformation > div .column, article .basicInformation > div p .column {
  border: solid 0px #767676;
  display: block;
  height: 10px;
  position: relative;
  width: 300px;
}

article .basicInformation > div .column > *, article .basicInformation > div p .column > * {
  background: #00CCFF;
  display: inherit;
  height: inherit;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

article .profileDetails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .profileDetails > div {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

article .profileDetails > div > label {
  font-weight: 600;
  width: 100px;
}

article .profileDetails > div .wiki {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

article .profileDetails > div.wide label {
  width: 100%;
}

article .profileDetails > div > p.address > span {
  display: block;
}

article .profilePictures ul li {
  font-weight: 600;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(50% - 5px);
}

@media only screen and (max-width: 544px) {
  article .profilePictures ul li {
    width: 100%;
  }
}

article .profilePictures img {
  aspect-ratio: 1;
  width: 100%;
}

@media only screen and (max-width: 600px) {
  article .profilePictures ul {
    gap: 10px;
  }
}

article > p.note {
  display: flex;
  font-style: italic;
}

article .editProfile form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .editProfile form > div {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

article .editProfile form > div > label {
  font-weight: 600;
  width: 100px;
}

article .editProfile form > div.wide > label, article .editProfile form > div.wide > textarea {
  width: 312px;
}

@media only screen and (max-width: 350px) {
  article .editProfile form > div.wide > textarea {
    width: 100%;
  }
}

article .editProfile form > div > p {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

article .editProfile form > div > p.among {
  flex-direction: column;
}

article .editProfile form > div img {
  max-width: 206px;
  height: auto;
  width: auto;
  border: solid 1px #767676;
}

article .register form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .register form > div {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

article .register form > div > label {
  font-weight: 600;
  width: 100px;
}

article .album {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .album ul {
  gap: 10px;
}

article .album ul li {
  align-items: unset;
  flex-direction: column;
  gap: 10px;
  justify-content: start;
  width: 108px;
}

article .album ul li > a {
  width: 108px;
  height: 108px;
  display: flex;
}

article .album ul li > a .with-text-on {
  width: 108px;
  height: 108px;
}

article .album ul li > a img {
  max-width: 108px;
  max-height: 108px;
  height: auto;
  width: auto;
  border: solid 0px #767676;
  box-sizing: border-box;
  display: flex;
}

article .album ul li > a:hover img, article .album ul li > a:active img {
  border: solid 2px #F0F0F0;
}

@media only screen and (max-width: 250px) {
  article .album ul li {
    width: 100%;
  }
  article .album ul li > a {
    aspect-ratio: 1;
    height: unset;
    width: 100%;
  }
  article .album ul li > a .with-text-on {
    height: unset;
    width: 100%;
  }
  article .album ul li > a img {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: unset;
  }
}

article .album form input[type=submit] {
  width: 108px;
}

article .addPicture form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

article .addPicture form textarea {
  max-width: 344px;
  width: unset;
}

article .addPicture form input[type=submit] {
  width: 108px;
}

body#satellite {
  background: unset;
  margin: 0;
}

body#satellite > * {
  background: unset;
}

body#satellite article {
  padding: 0;
}

article .pictureDetailSatellite {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 696px;
}

article .pictureDetailSatellite > .picture {
  display: flex;
}

article .pictureDetailSatellite > .picture img {
  max-width: 696px;
  height: auto;
  width: auto;
  background: #FFF;
  border: solid 1px #767676;
  box-sizing: border-box;
  display: flex;
}

article .pictureDetailSatellite > .picture .with-text-on .text-to-show {
  bottom: 16px;
  font-size: 3em;
  line-height: 1.3em;
  margin-right: 16px;
  padding: 12px;
}

article .pictureDetailSatellite > .picture > img, article .pictureDetailSatellite > .picture .with-text-on {
  min-height: 696px;
  min-width: 696px;
}

article .pictureDetailSatellite > .picture-footer {
  display: flex;
  gap: 10px;
}

article .pictureDetailSatellite > .picture-footer > span {
  display: flex;
  min-width: 15px;
}

article .pictureDetailSatellite > .picture-footer > .description {
  background: #FFF;
}