/* Comic-Übersicht: Ergänzung zur vorhandenen styles.css */
.comics-main {max-width: 1160px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem;}
.comics-intro {max-width: 760px; margin: 0 auto 3.2rem; text-align: center; line-height: 1.65;}
.eyebrow {display: block; color: #a17b38; font-size: 1.08rem; letter-spacing: .06em;}
.comics-intro h1 {font-size: clamp(2.7rem,5vw,4.2rem); color: #315a54; margin: .3rem 0 .7rem; font-weight: normal;}
.comics-intro p {margin: .75rem 0; font-size: 1.08rem;}
.comics-intro .comics-lead {font-size: clamp(1.22rem,2.3vw,1.5rem); color: #765a3c;}
.intro-note {color: #6f6b60; font-style: italic;}
.collection-heading {display: flex; align-items: center; justify-content: center; gap: 1rem; color: #b99451; margin-bottom: 1.6rem;}
.collection-heading h2 {font-size: 1.6rem; font-weight: normal; color: #315a54; margin: 0; text-align: center;}
.topic-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.3rem;}
.topic-card {box-sizing: border-box; display: flex; flex-direction: column; min-height: 300px; padding: 1.7rem 1.8rem; border: 1px solid #e7d7b9; border-radius: 20px; background: linear-gradient(145deg,#fffdf8,#f6edda); box-shadow: 0 5px 20px rgba(96,73,39,.07);}
.topic-card:nth-child(3n+2) {background: linear-gradient(145deg,#fffdf8,#eaf2ec);}
.topic-card:nth-child(3n+3) {background: linear-gradient(145deg,#fffdf9,#f5e9e8);}
.topic-card-top {display: flex; align-items: center; justify-content: space-between; color: #b28c4e;}
.topic-number {font-size: .9rem; letter-spacing: .15em;}
.topic-flourish {font-size: 1.2rem;}
.topic-card h2 {font-size: clamp(1.35rem,2.1vw,1.7rem); line-height: 1.2; color: #315a54; font-weight: normal; margin: .65rem 0 .45rem;}
.topic-description {color: #665b4f; line-height: 1.5; margin: 0 0 1.2rem;}
.topic-works {border-top: 1px solid #e3d9c9; padding-top: 1rem; margin-top: auto;}
.topic-small-title {font-size: .84rem; color: #8a6d41; font-weight: bold;}
.topic-works ul {margin: .5rem 0 .8rem; padding-left: 1.2rem; line-height: 1.55;}
.topic-works li {margin-bottom: .25rem;}
.topic-status {font-size: .8rem; color: #777166; align-self: flex-start; background: rgba(255,255,255,.65); border-radius: 99px; padding: .35rem .7rem;}
.comics-ending {text-align: center; color: #9a783f; font-size: 1.05rem; margin: 3rem 0 1rem;}
@media (max-width: 768px) {
  .comics-main {padding: 1.5rem 1rem 0;}
  .comics-intro {margin-bottom: 2.3rem;}
  .topic-grid {grid-template-columns: 1fr; gap: 1rem;}
  .topic-card {min-height: 0; padding: 1.35rem;}
  .collection-heading {gap: .6rem;}
  .collection-heading h2 {font-size: 1.35rem;}
}

/* Vorschaubilder: echte Comic-Dateien werden automatisch angezeigt, sobald vorhanden. */
.comic-preview-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; margin-top:.75rem;}
.comic-preview {min-width:0;}
.preview-art {position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:linear-gradient(145deg,#f8ead1,#e6f0e9); border:1px solid #e5d7bd;}
.preview-art img {width:100%; height:100%; object-fit:cover; display:block;}
.preview-placeholder {display:none; position:absolute; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:.3rem; color:#80663f; font-size:.85rem;}
.preview-art.image-missing .preview-placeholder {display:flex;}
.preview-symbol {font-size:1.5rem; color:#b28c4e;}
.preview-title {font-size:.9rem; line-height:1.4; color:#315a54; margin:.45rem 0 .25rem; font-weight:bold;}
@media(max-width:420px){.comic-preview-grid{gap:.6rem}.preview-title{font-size:.82rem}}