/* Grundlayout */
body{
  margin:0;
  background:#cfcac7;
  color:#2a1b18;
  font-family:system-ui, sans-serif;
}

/* zentrale Begrenzung */
.wrapper{
  max-width:1500px;
  margin:0 auto;
}

/* Desktop Layout */
.layout{
  display:grid;
  grid-template-columns:220px 1fr;
  align-items:start;
}

/* Header / Banner */
.site-header{
  max-width:1472px;
  margin:22px auto 20px auto;
}

.site-header img{
  width:auto;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  opacity:0.90;
  box-shadow:6px 10px 24px rgba(0,0,0,0.42);
}

/* Navigation */
.site-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
}

.nav-link{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:#6B140D;
  font-weight:600;
  background:linear-gradient(145deg, #e0ddda, #d2cfcc);
  border:1px solid rgba(0,0,0,0.06);
  transition:transform .12s ease, box-shadow .12s ease;
}

.nav-link:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.nav-link.active{
  background:#dcd9d7;
  border-right:3px solid #6B140D;
  border-left:3px solid #6B140D;
  padding-left:8px;
}

/* Navigation: Audio */
.nav-audio{
  margin-top:8px;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(145deg, #e0ddda, #d2cfcc);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  display:flex;
  justify-content:center;
  align-items:center;
}

.nav-audio audio{
  height:18px;
}

.nav-audio-title{
  font-size:12px;
  color:#6B140D;
  font-weight:600;
  margin-bottom:6px;
}

/* Inhalt */
main{
  padding:20px;
  line-height:1.5;
}

/* Karten / Kacheln */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
}

.card{
  background:linear-gradient(145deg, #dcd9d7, #d2cfcc);
  border-radius:14px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.card h1{
  margin:0 0 14px;
  font-size:22px;
  color:#6B140D;
  text-align:center;
}

.card h2{
  margin:24px 0 10px;
  font-size:18px;
  color:#990033;
}

.card h3{
  margin:0 0 8px;
  font-size:17px;
}

.card img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:10px 0;
}

/* Favoriten */
.grid.favoriten-grid{
  grid-template-columns:1fr;
  max-width:1150px;
  margin:0 auto;
}

.grid.favoriten-grid .card{
  padding:2px 18px;
}

/* Filme: Liste */
.film-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:24px;
}

.film-list .card h3{
  color:#6B140D;
  font-weight:700;
}

/* Filme: Sortieroptionen */
.sort-options .sort-label{
  font-size:16px;
  font-weight:500;
}

.sort-options a{
  color:#444;
}

.sort-options a.active-sort{
  color:#6B140D;
  font-weight:700;
}


/* Star Trek / DS9 */
.trek-card h3{
  color:#6B140D;
}

/* Text */
.meta{
  font-size:13px;
  color:#5a4a47;
  margin-bottom:14px;
  text-align:center;
}

.excerpt{
  margin-bottom:12px;
}

.text-story{
  text-align:justify;
}

.center{
  text-align:center;
}

.title{
  color:#990033;
  font-weight:700;
}

.title-soft{
  color:#6B140D;
  font-weight:400;
  opacity:0.80;
}

.amazon{
  font-size:15px;
  font-weight:500;
}

.section-note{
  text-align:center;
  margin:28px 0 18px;
  font-size:13px;
  color:#5a4a47;
}

.muted-block,
.card .muted-block{
  color:#666666;
}

.section-title{
  color:#990033;
  font-size:18px;
  font-weight:500;
}

.banner-icon-grid .figure img{
  width:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  margin:10px auto;
}


/* Fotos / Figuren */
.figure{
  text-align:center;
}

/* Einheitliche schwebende Vorschaubilder in Kacheln
   Banner und Icons bleiben durch .banner-icon-grid ausgenommen. */
.grid:not(.banner-icon-grid) .card.figure img,
.card.is-clickable > img,
.card.is-clickable > a > img{
  width:100%;
  height:220px;
  object-fit:cover;
  border:2px solid #bcb7b4;
  background:#e6e3e1;
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 6px 14px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}

.grid:not(.banner-icon-grid) .card.figure img:hover,
.card.is-clickable > img:hover,
.card.is-clickable > a > img:hover{
  transform:scale(1.01);
}

.caption{
  margin:8px 0 0;
  font-size:13px;
  color:#5a4a47;
}


/* Bilder: Emojis */
.card img.emoji-img{
  display:block;
  margin:10px auto;
  width:30px;
  height:auto;
  border-radius:0;
}

/* Bilder: Buchcover */
.card img.book-cover{
  width:260px;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Arduino-Codebox */
.code-box{
  position:relative;
  background:#555555;
  color:#e6e6e6;
  border-radius:10px;
  padding:46px 16px 16px;
  overflow:auto;
  margin-top:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.code-box pre{
  margin:0;
  white-space:pre;
  font-family:Consolas, "Courier New", monospace;
  font-size:14px;
  line-height:1.45;
}

.copy-code{
  position:absolute;
  top:10px;
  right:10px;
  background:#dcd9d7;
  color:#6B140D;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:6px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.copy-code:hover{
  background:#eeeeee;
}

.code-comment{ color:#8fbf7f; }
.code-define{ color:#c586c0; }
.code-keyword{ color:#6aaed6; }
.code-number{ color:#d7ba7d; }
.code-func{ color:#dcdcaa; }

/* Medien-Blöcke */
.media{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:flex-start;
}

/* Footer */
.site-footer{
  text-align:center;
  font-size:12px;
  color:#5a4a47;
  padding:20px;
}

/* Tablet */
@media (max-width:900px){
  .layout{
    grid-template-columns:180px 1fr;
  }
}

/* Smartphone */
@media (max-width:650px){
  .layout{
    grid-template-columns:1fr;
  }

  .site-nav{
    flex-direction:column;
    padding:10px;
  }

  .nav-link{
    text-align:center;
  }

  main{
    padding:10px;
  }

  .site-header img{
    width:100%;
  }
}