/* ****************************************
   GRUNDREGELN
**************************************** */

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background-color:#1C1C1C;
  color:#8F8F8F;
  font-family:Arial, Verdana, sans-serif;
  overflow-x:hidden;
}


/* ****************************************
   HAUPTKASTEN
**************************************** */

#large {
  max-width:990px;
  margin:0 auto;

  background:
  linear-gradient(
    to right,
    #161616 0%,
    #262626 1%,
    #262626 10%,
    #262626 50%,
    #262626 90%,
    #262626 99%,
    #161616 100%
  );

  padding:40px;

  border-radius:6px;
  overflow:hidden;

  box-shadow:
    inset 30px 0 30px -30px rgba(0,0,0,0.20),
    inset -30px 0 30px -30px rgba(0,0,0,0.20),
    0px 10px 10px rgba(0,0,0,0.7);
}


/* ****************************************
   ALLGEMEINE ÜBERSCHRIFTEN
**************************************** */

h1 {
  color:#BFBFBF;
  text-align:center;
  font-size:32px;
  font-weight:normal;
}

h2 {
  color:#999999;
  text-align:center;
  font-weight:normal;
}


/* ****************************************
   SCHMUCKELEMENTE
**************************************** */

.punkt {
  color:#606d83;
  font-size:14px;
  vertical-align:middle;
  padding:0 6px;
}

.punkt.gross {
  font-size:40px;
  line-height:1;
}

.jahrtitel .punkt {
  margin-right:10px;
}

.titel-blau {
  color:#606d83;
}


/* ****************************************
   TITEL UND TYPOGRAFIE
**************************************** */

.seitenkopf {
  font-family:"Bodoni MT", Georgia, serif;
  font-size:42px;
  font-variant:small-caps;
  letter-spacing:2px;
  text-align:right;
  color:#d4d4d4;

  text-shadow:4px 5px 8px rgba(0,0,0,0.7);

  line-height:1.1;
  margin-top:20px;
  margin-bottom:40px;

  word-break:normal;
  overflow-wrap:break-word;
}

.jahrtitel {
  font-size:30px;
  text-align:right;
  color:#BFBFBF;
  line-height:1.1;
  margin-top:40px;
  margin-bottom:30px;
}

.jahrtitel-blau {
  color:#606d83;
}

.jahrtitel,
.gedankenbild-titel {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant:small-caps;
  font-weight:300;
  letter-spacing:1px;
  text-shadow:0 1px 2px rgba(0,0,0,0.30);
}

.gedankenbild-titel {
  color:#606D83;
  text-align:center;
  font-weight:normal;
  font-size:25px;
}


/* ****************************************
   TEXTE
**************************************** */

.einleitungstext,
.gedanken-text,
.impressum-text,
.reisetext {
  text-shadow:1px 1px 2px rgba(0,0,0,0.35);
  overflow-wrap:break-word;
}

.einleitungstext {
  max-width:700px;
  margin:35px auto;
  line-height:1.6;
  font-size:18px;
  text-align:center;
  color:#8f8f8f;
}

.impressum-text {
  max-width:700px;
  margin:14px auto 42px auto;
  line-height:1.6;
  font-size:18px;
  text-align:center;
  color:#8f8f8f;
}

/* Text linksbündig */

.reisetext {
  max-width:700px;
  margin:22px auto 38px auto;
  line-height:1.65;
  font-size:18px;
  text-align:left;
  color:#8f8f8f;
}

/* Text zentriert */

.reisetext-zentriert {
  text-align:center;
}

.seitenzitat {
  font-family:Georgia, "Times New Roman", serif;
  font-size:24px;
  line-height:1.5;
  text-align:center;
  color:#d2d2d2;

  margin:10px 0 35px 0;

  text-shadow:1px 1px 3px rgba(0,0,0,0.45);
}

.seitenzitat .quote {
  color:#606d83;
}


/* ****************************************
   BILDER UND BILDKÄSTEN
**************************************** */

.bildkasten {
  width:fit-content;
  max-width:100%;

  background-color:#141414;
  border:1px solid rgba(96,109,131,0.70);

  padding:40px;
  margin:50px auto;

  text-align:center;

  box-shadow:
    inset 0 0 4px rgba(96,109,131,0.5),
    2px 3px 10px rgba(0,0,0,0.6);
}

.bildkasten img {
  display:block;
  max-width:100%;
  height:auto;
}

.indexbild {
  margin-top:0;
  padding:25px;
}

.signaturbild {
  display:block;
  width:306px;
  max-width:100%;
  height:auto;
  margin:30px auto 0 auto;
}

/* ****************************************
   Zentrieren Gedankenbilder
**************************************** */

.gedankenbild {
  text-align:center;
  margin:50px auto;
}

.gedankenbild img {
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

.gedanken-text {
  max-width:700px;
  margin:20px auto 0 auto;
  line-height:1.6;
  font-size:18px;
  text-align:center;
  color:#8f8f8f;
}


/* ****************************************
   LINIEN UND TRENNER
**************************************** */

.leiste {
  height:1px;
  background-color:#606d83;

  margin:28px auto;

  box-shadow:0 4px 5px #000;
}

.leiste.leiste-footer {
  margin:20px auto 25px auto;
}


/* ****************************************
   LAYOUTBEREICHE
**************************************** */

.indexbereich {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;

  align-items:start;

  margin:40px auto 20px auto;
}

.indexinhalt {
  text-align:center;
}

.indexinhalt .gedankenbild-titel {
  margin-bottom:10px;
}


/* ****************************************
   SEITENNAVIGATION
**************************************** */

.jahresnavigation {
  padding:10px 0;
  text-align:center;
}

.jahresnavigation h2 {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:1.2rem;

  font-variant:small-caps;
  font-weight:300;
  letter-spacing:0.04em;

  color:#606d83;

  text-shadow:0 1px 2px rgba(0,0,0,0.30);

  text-align:center;

  margin:22px 0 6px 0;
}

.jahresnavigation a {
  display:block;

  padding:4px 0;
  line-height:1.25;

  color:#9a9a9a;
  text-decoration:none;

  letter-spacing:0.5px;

  transition:color 0.25s ease;

  font-size:0.95rem;
}

.jahresnavigation a:hover {
  color:#BFBFBF;
}


/* ****************************************
   HOME-LINK UND SOCIAL ICONS
**************************************** */

.home-link {
  margin-top:40px;
  text-align:center;
}

.home-link a {
  color:#707070;
  text-decoration:none;
  letter-spacing:2px;
  font-size:13px;
}

.home-link a:hover {
  color:#BFBFBF;
}

.seitenlinks {
  text-align:center;
  margin:55px auto 35px auto;
}

.social-icons {
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:35px;
}

.social-icons img {
  width:36px;
  height:auto;

  opacity:0.82;

  transition:opacity 0.25s ease;
}

.social-icons img:hover {
  opacity:1;
}


/* ****************************************
   SPEZIALLINKS
**************************************** */

.link-dezent {
  color:#8f8f8f;
  text-decoration:none;
  transition:color 0.25s ease;
}

.link-dezent:hover {
  color:#bfbfbf;
}

.link-navigation {
  display:block;
  width:fit-content;
  margin:6px auto;

  color:#606d83;
  text-decoration:none;

  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant:normal;
  letter-spacing:0.3px;

  transition:color 0.25s ease;
}

.link-navigation:hover {
  color:#8ea0bf;
}

.news-link {
  text-align:center;
  margin:18px auto 28px auto;
}


/* ****************************************
   FOOTER
**************************************** */

.footer {
  text-align:right;

  margin-top:15px;
  margin-bottom:0;

  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:14px;

  color:#9a9a9a;

  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}


/* ****************************************
   NACH OBEN BUTTON
**************************************** */

.up-button {
  display:block;
  width:fit-content;

  margin:40px auto 10px auto;
  padding:8px 18px;

  color:#B1B1B1;
  text-decoration:none;

  background-color:#424a58;

  border:1px solid rgba(210,220,235,0.35);
  border-radius:6px;

  font-size:14px;
  letter-spacing:1px;
}

.up-button:hover {
  color:#fff;
  background-color:#4b5668;
}

/* ****************************************
   HANDY / RESPONSIVE
**************************************** */

@media (max-width:700px) {

  #large {
    width:100%;
    max-width:100%;
    padding:18px 12px;
    border-radius:0;
  }

  .seitenkopf {
    font-size:20px;
    text-align:center;
    letter-spacing:0;
    line-height:1.2;
  }

  .punkt.gross {
    font-size:20px;
    padding:0 2px;
  }

  .indexbereich {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:25px;
  }

  .bildkasten {
    width:100%;
    padding:12px;
    margin:25px auto;
  }

  .indexbild {
    padding:12px;
  }

  .jahrtitel {
    font-size:22px;
    text-align:center;
  }

  .gedankenbild-titel {
    font-size:24px;
  }

  .impressum-text,
  .reisetext {
    font-size:16px;
    line-height:1.55;
  }

  .reisetext {
    text-align:left;
  }
  
  .reisetext-zentriert {
  text-align:center;
}

  .seitenzitat {
    font-size:22px;
  }

  .signaturbild {
    width:240px;
  }

  .indexinhalt {
    min-width:0;
  }

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

  .up-button {
    display:block;
  }

}


/* ****************************************
   QUERFORMAT HANDY
**************************************** */

@media (max-width:700px) and (orientation:landscape) {

  .up-button {
    display:block !important;
  }

}