/* ****************************************
   CERAMICSPACE * 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;
  padding:40px;
  overflow:hidden;
  border-radius:6px;
  background:linear-gradient(
    to right,
    #161616 0%,
    #262626 1%,
    #262626 10%,
    #262626 50%,
    #262626 90%,
    #262626 99%,
    #161616 100%
  );
  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 TITEL
**************************************** */

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 {
  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.7);
  word-break:normal;
  overflow-wrap:break-word;
}

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

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

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

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

.reisetext,
.gedanken-text,
.ceramic-text {
  color:#8f8f8f;
  text-shadow:1px 1px 2px rgba(0,0,0,0.35);
  overflow-wrap:break-word;
}

.reisetext {
  max-width:700px;
  margin:20px auto 38px auto;
  line-height:1.45;
  font-size:18px;
  text-align:center;
}

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

/* ****************************************
   TITELBILD UND SIGNATUR
**************************************** */

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

.bildkasten-ceramic img {
  border:1px solid #BFBFBF;
}

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

/* ****************************************
   GEMEINSAME REGELN FÜR ALLE SCHUBLADEN
**************************************** */

.ceramic-schublade {
  display:grid;
  gap:30px;
  align-items:center;
  max-width:760px;
  margin:30px auto 60px auto;
}

.ceramic-bild {
  margin:auto;
}

.ceramic-bild img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid #BFBFBF;
}

.ceramic-text {
  font-size:18px;
  line-height:1.45;
}

.ceramic-text p {
  margin:0;
  text-align:left;
}

.ceramic-text-zentriert p {
  text-align:center;
}

/* ****************************************
   BILDGRÖSSEN FÜR SCHUBLADE 1 UND 2
**************************************** */

.ceramic-bild-detail {
  max-width:220px;
}

.ceramic-bild-standard {
  max-width:320px;
}

.ceramic-bild-highlight {
  max-width:520px;
}

/* ****************************************
   SCHUBLADE 1 – Bild links, Text rechts
**************************************** */

.bild-links {
  grid-template-columns:auto 1fr;
}

/* ****************************************
   SCHUBLADE 2 – Text links, Bild rechts
**************************************** */

.bild-rechts {
  grid-template-columns:1fr auto;
}

/* ****************************************
   SCHUBLADE 3 – Drei Bilder
**************************************** */

.drei-bilder-block {
  grid-template-columns:1fr;
}

.ceramic-dreiergruppe {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.ceramic-dreiergruppe .ceramic-bild {
  width:100%;
  max-width:none;
}

/* ****************************************
   SCHUBLADE 4 – Grosses Bild mittig
**************************************** */

.grosses-bild {
  grid-template-columns:1fr;
}

.ceramic-bild-mitte-520,
.ceramic-bild-mitte-620,
.ceramic-bild-mitte-720,
.ceramic-bild-mitte-820 {
  margin:auto;
}

.ceramic-bild-mitte-520 {
  max-width:520px;
}

.ceramic-bild-mitte-620 {
  max-width:620px;
}

.ceramic-bild-mitte-720 {
  max-width:720px;
}

.ceramic-bild-mitte-820 {
  max-width:820px;
}

/* ****************************************
   SCHUBLADE 5 – Zwei Bilder
**************************************** */

.zwei-bilder-block {
  grid-template-columns:1fr;
}

.ceramic-zweiergruppe {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  max-width:520px;
  margin:auto;
}

.ceramic-zweiergruppe .ceramic-bild {
  width:100%;
  max-width:none;
}

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

/* ****************************************
   LINKS UND SCHLUSSBEREICH
**************************************** */

.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:hover {
  color:#8ea0bf;
}

.link-blau,
.link-blau:link,
.link-blau:visited {
  color:#606d83;
  text-decoration:none;
  transition:color 0.25s ease;
}

.link-blau:hover,
.link-blau:focus,
.link-blau:active {
  color:#8ea0bf;
  text-decoration:none;
}

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

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

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

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

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

  .reisetext {
    text-align:left;
  }

  .signaturbild {
    width:240px;
  }

  .bild-links,
  .bild-rechts {
    grid-template-columns:1fr;
  }

  .ceramic-dreiergruppe,
  .ceramic-zweiergruppe {
    grid-template-columns:1fr;
    gap:20px;
  }

  .ceramic-dreiergruppe .ceramic-bild,
  .ceramic-zweiergruppe .ceramic-bild {
    width:100%;
    max-width:320px;
  }

  .grosses-bild .ceramic-bild {
    max-width:100%;
  }
}