/* Nur der Grafik-Bereich. Standard-Header und -Footer bleiben in /styles.css. */
.page-grafik { background-color: #061522; color: #e9e7df; }
.page-grafik .grafik-home, .page-grafik .grafik-collection { width: min(1180px, calc(100% - 40px)); margin: 32px auto 64px; }
.page-grafik .grafik-bande-banner { display: block; border-radius: 16px; overflow: hidden; border: 1px solid #374650; }
.page-grafik .grafik-bande-banner img { display: block; width: 100%; height: auto; }
.page-grafik .grafik-bande-note { text-align: center; margin: 18px 0 30px; line-height: 1.65; }
.page-grafik .grafik-bande-note a, .page-grafik .grafik-back, .page-grafik .grafik-original-link { color: #d9b775; text-decoration: none; }
.page-grafik .grafik-bande-note a:hover, .page-grafik .grafik-back:hover { text-decoration: underline; }
.page-grafik .grafik-topics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.page-grafik .grafik-topic-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid #394953; border-radius: 16px; background: linear-gradient(135deg,#102b40,#071724); color: #f0ede5; text-decoration: none; transition: border-color .18s, background-color .18s; }
.page-grafik .grafik-topic-card:hover { border-color: #d9b775; }
.page-grafik .grafik-kicker { display: block; color: #d9b775; font: 700 .82rem/1.5 system-ui,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.page-grafik .grafik-topic-card h2 { font: 700 clamp(2rem,4vw,2.8rem)/1.15 Georgia,serif; margin: 14px 0; }
.page-grafik .grafik-topic-card p { color: #c4ccd3; font: 1rem/1.7 system-ui,sans-serif; margin: 0 0 24px; }
.page-grafik .grafik-card-link { margin-top: auto; color: #d9b775; font: 700 1rem/1.5 system-ui,sans-serif; }
.page-grafik .grafik-intro { max-width: 860px; margin: 0 auto 36px; }
.page-grafik .grafik-back { display: inline-block; font: 1rem/1.5 system-ui,sans-serif; margin-bottom: 24px; }
.page-grafik .grafik-intro h1 { font: 700 clamp(2.4rem,6vw,3.6rem)/1.15 Georgia,serif; margin: 14px 0 20px; }
.page-grafik .grafik-intro p { font: 1rem/1.8 system-ui,sans-serif; color: #c4ccd3; }
.page-grafik .grafik-intro .grafik-lead { font-size: 1.15rem; color: #e9e7df; }
.page-grafik .grafik-intro .grafik-view-note { color: #d9b775; }
.page-grafik .grafik-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0 auto; align-items: start; }
.page-grafik .grafik-figure { margin: 0; }
.page-grafik .grafik-image-link { display: block; cursor: zoom-in; border-radius: 12px; }
.page-grafik .grafik-image-link img { display: block; width: 100%; height: auto; border-radius: 12px; }
.page-grafik .grafik-bottom-back { margin: 32px auto 0; }
.page-grafik .grafik-lightbox { box-sizing: border-box; width: min(1500px,96vw); max-width: 96vw; max-height: 94vh; max-height: 94dvh; padding: 52px 16px 18px; border: 1px solid #405361; border-radius: 12px; background: #061522; color: #e9e7df; }
.page-grafik .grafik-lightbox::backdrop { background: rgba(0,0,0,.88); }
.page-grafik .grafik-lightbox-stage { max-height: calc(94vh - 115px); max-height: calc(94dvh - 115px); overflow: auto; text-align: center; }
.page-grafik .grafik-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.page-grafik .grafik-lightbox-close { position: absolute; top: 7px; right: 10px; width: 40px; height: 40px; font: 32px/1 system-ui,sans-serif; border: 1px solid #405361; border-radius: 8px; background: #102b40; color: white; cursor: pointer; }
.page-grafik .grafik-original-link { display: inline-block; margin: 12px 0 0; font: 1rem/1.5 system-ui,sans-serif; }
.page-grafik a:focus-visible, .page-grafik button:focus-visible { outline: 3px solid #e4bf77; outline-offset: 5px; }
.page-grafik .grafik-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(min-width:641px) and (max-width:900px) { .page-grafik .grafik-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .page-grafik .grafik-home, .page-grafik .grafik-collection { width: calc(100% - 28px); margin-top: 20px; } .page-grafik .grafik-topics { grid-template-columns: minmax(0,1fr); } .page-grafik .grafik-topic-card { padding: 24px; } .page-grafik .grafik-gallery { grid-template-columns: minmax(0,1fr); gap: 24px; } }