/* **************************************
   MASTERSEITE REISEN * FORMAT * DANIELA JOSS
*************************************** */

/* ****************************************
   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),
    0 10px 10px rgba(0,0,0,0.7);
}


/* ****************************************
   ÜBERSCHRIFTEN UND SCHMUCKELEMENTE
**************************************** */

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

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

.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,
.jahrtitel-blau {
  color:#606d83;
}

.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-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);
  font-size:30px;
  text-align:right;
  color:#BFBFBF;
  line-height:1.1;
  margin-top:40px;
  margin-bottom:30px;
}

.reisebild-titel {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant:small-caps;
  font-weight:normal;
  letter-spacing:1px;
  text-shadow:0 1px 2px rgba(0,0,0,0.30);
  color:#606D83;
  text-align:center;
  font-size:25px;
}


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

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

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


/* ****************************************
   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;
}

.reisebild,
.reisekarte {
  text-align:center;
  margin:50px auto;
}

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

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


/* ****************************************
   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;
}


/* **************************************
   SEITENINDEX (LICHTLEIN)
*************************************** */

.seitenindex {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:50px auto;
}

.seitenindex a {
  padding:6px 10px;
  color:#7F92B2;
  border-radius:6px;
  font-size:1rem;
  text-decoration:none;
  transition:color 0.3s ease, background-color 0.3s ease;
}

.seitenindex a:hover,
.seitenindex a:focus-visible {
  color:#AFC3E8;
  background-color:rgba(120,140,180,0.12);
}

.seitenindex .aktiv {
  color:#D8E4FF;
  background-color:rgba(120,140,180,0.18);
}


/* ****************************************
   SEITENABSCHLUSS UND LINKS
**************************************** */

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

.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:visited,
.link-navigation:hover,
.link-navigation:focus,
.link-navigation:active {
  text-decoration:none;
  border-bottom:none;
}

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

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

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


/* ****************************************
   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;
  }

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

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

  .reisebild-titel {
    color:#606D83;
    font-size:24px;
  }

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

  .signaturbild {
    width:240px;
  }

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

/* ****************************************
   WILDPARK * OPTIONALE SCHUBLADE
   BILD LINKS – TEXT RECHTS
**************************************** */

.bild-text-zeile {
  display:grid;
  grid-template-columns:minmax(180px, 250px) 1fr;
  gap:34px;
  align-items:center;
  max-width:750px;
  margin:45px auto;
}

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

.bild-text-zeile .reisetext {
  margin:0;
}

.datum {
  margin:15px auto 35px;
  text-align:center;
  font-size:17px;
}

@media (max-width:700px) {
  .bild-text-zeile {
    grid-template-columns:1fr;
    gap:20px;
    margin:35px auto;
  }
}


/* ****************************************
   TABELLE OHNE TABELLE – CSS GRID
**************************************** */

.techliste {
  display:grid;
  grid-template-columns:210px auto;
  justify-content:center;

  column-gap:30px;
  row-gap:8px;

  width:100%;
  margin:40px auto;

  align-items:start;
  font-size:16px;
  line-height:1.5;
}

.techliste .links {
  color:#606d83;
  letter-spacing:2px;
  text-align:left;
}

.techliste .rechts {
  color:#8F8F8F;
  text-align:left;
  max-width:360px;
}

@media (max-width:700px) {

  .techliste {
    grid-template-columns:1fr;
    justify-content:stretch;

    row-gap:6px;
    width:100%;
  }

  .techliste .links {
    margin-top:18px;
    font-weight:500;
    text-align:center;
  }

  .techliste .rechts {
    max-width:none;
    text-align:center;
  }
}