/* **************************************
   SYS INDEX * FORMAT * DANIELA JOSS
*************************************** */

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

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

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

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

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

#large {
  max-width:990px;
  margin:0 auto;
  padding:40px;
  overflow:hidden;
  background:linear-gradient(
    to right,
    #161616 0%,
    #262626 1%,
    #262626 10%,
    #262626 50%,
    #262626 90%,
    #262626 99%,
    #161616 100%
  );
  border-radius:6px;
  box-shadow:
    inset 30px 0 30px -30px rgba(0,0,0,0.20),
    inset -30px 0 30px -30px rgba(0,0,0,0.20),
    0 10px 10px rgba(0,0,0,0.70);
}

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

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

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

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

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

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

.seitenkopf {
  margin-top:20px;
  margin-bottom:40px;
  color:#d4d4d4;
  font-family:"Bodoni MT", Georgia, serif;
  font-size:42px;
  font-variant:small-caps;
  letter-spacing:2px;
  line-height:1.1;
  text-align:right;
  text-shadow:4px 5px 8px rgba(0,0,0,0.70);
  overflow-wrap:break-word;
}

.seitentitel,
.reisetitel {
  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);
}

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

.reisetitel {
  margin-top:36px;
  margin-bottom:18px;
  color:#606d83;
  font-size:25px;
  font-weight:normal;
  text-align:center;
}

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

.reisetext {
  max-width:700px;
  margin:22px auto 38px auto;
  color:#8f8f8f;
  font-size:18px;
  line-height:1.65;
  text-align:left;
  overflow-wrap:break-word;
  text-shadow:1px 1px 2px rgba(0,0,0,0.35);
}

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

.seitenzitat {
  margin:10px 0 35px 0;
  color:#d2d2d2;
  font-family:Georgia, "Times New Roman", serif;
  font-size:24px;
  line-height:1.5;
  text-align:center;
  text-shadow:1px 1px 3px rgba(0,0,0,0.45);
}

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

/* ****************************************
   BILDER
**************************************** */

.bildkasten {
  width:fit-content;
  max-width:100%;
  margin:50px auto;
  padding:40px;
  background-color:#141414;
  border:1px solid rgba(96,109,131,0.70);
  text-align:center;
  box-shadow:
    inset 0 0 4px rgba(96,109,131,0.50),
    2px 3px 10px rgba(0,0,0,0.60);
}

.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;
}

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

.leiste {
  height:1px;
  margin:28px auto;
  background-color:#606d83;
  box-shadow:0 4px 5px #000;
}

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

/* ****************************************
   INDEX UND SEITENNAVIGATION
**************************************** */

.indexbereich {
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:40px;
  align-items:start;
  margin:40px auto 20px auto;
}

.indexinhalt {
  min-width:0;
  text-align:center;
}

.indexinhalt .reisetitel {
  margin-bottom:10px;
}

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

.seitennavigation h2 {
  margin:22px 0 6px 0;
  color:#606d83;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:1.2rem;
  font-variant:small-caps;
  font-weight:300;
  letter-spacing:0.04em;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,0.30);
}

.seitennavigation a {
  display:block;
  position:relative;
  padding:4px 0;
  color:#9a9a9a;
  font-size:0.95rem;
  letter-spacing:0.5px;
  line-height:1.25;
  text-decoration:none;
  transition:color 0.25s ease;
}

.seitennavigation a:hover {
  color:#bfbfbf;
}

/* Lichtlein für die aktuell geöffnete Seite:
   class="aktiv" am betreffenden Link ergänzen. */

.seitennavigation a.aktiv {
  color:#bfbfbf;
}

.seitennavigation a.aktiv::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  vertical-align:middle;
  background-color:#8290a7;
  border-radius:50%;
  box-shadow:
    0 0 5px rgba(130,144,167,0.95),
    0 0 10px rgba(130,144,167,0.55);
}

/* ****************************************
   HOME-LINK
**************************************** */

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

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

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

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

.footer {
  margin-top:15px;
  margin-bottom:0;
  color:#9a9a9a;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:14px;
  text-align:right;
  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;
  background-color:#424a58;
  border:1px solid rgba(210,220,235,0.35);
  border-radius:6px;
  font-size:14px;
  letter-spacing:1px;
  text-decoration:none;
}

.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 {
    margin-top:10px;
    margin-bottom:28px;
    font-size:20px;
    letter-spacing:0;
    line-height:1.2;
    text-align:center;
  }

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

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

  .seitennavigation {
    padding-bottom:0;
  }

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

  .indexbild {
    padding:12px;
  }

  .seitentitel {
    margin-top:28px;
    margin-bottom:24px;
    font-size:22px;
    text-align:center;
  }

  .reisetitel {
    font-size:22px;
  }

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

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

  .seitenzitat {
    font-size:22px;
  }

  .signaturbild {
    width:240px;
  }

  .footer {
    text-align:center;
  }
}

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

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

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