/* kultmags.com – modernisierte, bewusst zurückhaltende Oberfläche */
:root {
    --km-blue: #006699;
    --km-text: #111;
    --km-muted: #666;
    --km-row-1: #f2f2f2;
    --km-row-2: #e6e6e6;
    --km-border: #d7d7d7;
    --km-soft: #fafafa;
}

* { box-sizing: border-box; }
html { overflow-y: scroll; }
body {
    margin: 0;
    background: #fff;
    color: var(--km-text);
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 10pt;
    line-height: 1.45;
}
a { color: #000; text-decoration: none; }
a:visited { color: #000; }
a:hover { text-decoration: underline; }
img { border: 0; max-width: 100%; }
/* Wichtig für die historischen News: dort werden Bildgrößen häufig direkt per
   width=/height=-Attribut gesetzt. Ein globales height:auto würde diese alten
   Größenangaben überschreiben und die Bilder ungewollt vergrößern. */

.site-header {
    width: min(1180px, calc(100% - 24px));
    margin: 0 auto;
    text-align: center;
}
.brand { display: block; margin: 0 auto 8px; }
.brand img { display: block; margin: 0 auto; max-height: 300px; object-fit: contain; }
.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    font-weight: 700;
}
.main-nav a { padding: 4px 8px; }
.main-nav a + a::before { content: '|'; margin-right: 16px; font-weight: 400; color: #555; }
.main-nav a.active { text-decoration: underline; text-underline-offset: 3px; }
.nav-support {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.nav-support::before {
    content: '|';
    margin: 0 16px 0 8px;
    font-weight: 400;
    color: #555;
}
.nav-support button {
    appearance: none;
    border: 0;
    padding: 4px 8px;
    margin: 0;
    background: transparent;
    color: #000;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.nav-support button:hover,
.nav-support button:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}


.site-main {
    width: min(1180px, calc(100% - 24px));
    margin: 30px auto 0;
    min-height: 0;
}
.site-footer { text-align: center; padding: 10px 12px 20px; }
.site-footer img { max-width: min(100%, 420px); }

.error-box {
    max-width: 725px;
    margin: 20px auto;
    padding: 8px 10px;
    border-top: 2px solid #ff666a;
    border-bottom: 2px solid #ff666a;
    background: #ffbbbd;
}

.archive-title-image { text-align: center; margin: 4px 0 36px; }
.archive-title-image img { max-width: 100%; }

.folder-list { width: min(760px, 100%); margin: 0 auto 28px; }
.folder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 58px 110px;
    align-items: center;
    min-height: 28px;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding: 3px 0;
}
.folder-name { min-width: 0; display: flex; align-items: center; gap: 6px; }
.folder-name > img { width: 24px; height: auto; flex: 0 0 auto; }
.folder-progress,
.folder-dlc { display: flex; align-items: center; justify-content: center; min-height: 22px; }
.folder-progress img,
.folder-dlc img { max-height: 20px; width: auto; display: block; }
.folder-size { text-align: right; white-space: nowrap; }

.magazine-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 26px 10px;
    width: 100%;
}
.magazine-card {
    flex: 0 0 150px;
    width: 150px;
    text-align: center;
    min-width: 0;
}
.item-title { min-height: 40px; display: flex; justify-content: center; align-items: flex-start; }
.mag-cover { display: block; margin: 0 auto; max-width: 150px; }
.download-icons { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.download-icons img { width: auto; max-height: 34px; }

.media-folder-grid {
    width: min(1000px, 100%);
    margin: 0 auto 30px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
}
.media-folder-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 112px;
}
.media-folder-image { display: flex; justify-content: flex-end; }
.media-folder-image img { width: 100px; max-height: 110px; object-fit: contain; }

.detail-list { width: min(1000px, 100%); margin: 0 auto; }
.detail-item {
    display: grid;
    grid-template-columns: minmax(300px, 350px) minmax(0, 1fr);
    gap: 26px;
    padding: 18px 0 28px;
    border-bottom: 1px solid #eee;
}
.detail-media { text-align: center; }
.book-cover { max-width: 320px; }
.game-screen { display: block; width: 320px; max-width: 100%; margin: 0 auto 4px; }
.download-label { margin-top: 14px; }
.online-link { display: inline-block; margin-top: 8px; }
.detail-text { text-align: left; min-width: 0; }
.detail-text img { max-width: 100%; }

.news-content { width: 100%; overflow-x: auto; }
.news-content > table { margin-left: auto; margin-right: auto; }
/* Historische News enthalten bewusst feste width-/height-Angaben direkt im HTML.
   Diese haben Vorrang, damit Beiträge optisch wie früher erscheinen. */
.news-content img {
    max-width: 100%;
    object-fit: contain;
}
/* V13: Die alte Startseite verwendete main.css. Dort hatte .smtxt keine
   eigene kleinere Schriftgröße und erbte 10pt von body/td/th. Genau dieses
   Verhalten stellen wir für die historischen News wieder her. */
.news-content .smtxt,
.news-content .smtxt a { font-size: 10pt; }
.smtxt, .smtxt a { font-size: 10pt; }
.smsmall, .smsmall a { font-size: 9px; }

#content_text_first, #help, #content_text_second {
    width: min(1080px, 100%) !important;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
#paypalbutton { text-align: center; margin: 22px 0; }
#content table { max-width: 100%; }

/* V14: MISSING – optisch an Impressum und die Archivübersichten angeglichen. */
.missing-page {
    width: min(760px, 100%);
    margin: 0 auto 34px;
    color: #111;
}
.missing-page > h1 {
    margin: 0 0 7px;
    text-align: center;
    font-size: 16px;
    line-height: 1.3;
    color: #111;
    letter-spacing: .2px;
}
.missing-rule {
    height: 1px;
    margin: 0 0 24px;
    background: #bdbdbd;
}
.missing-rule.bottom {
    margin: 22px 0 0;
}
.missing-section {
    margin: 0 0 22px;
}
.missing-section h2 {
    margin: 0;
    padding: 4px 7px;
    background: #111;
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}
.missing-count {
    font-weight: 400;
    color: #d8d8d8;
}
.missing-copy {
    padding: 2px 7px 0;
}
.missing-copy p {
    margin: 8px 0 0;
    line-height: 1.55;
    text-align: justify;
}
.missing-copy a {
    color: #000;
    text-decoration: underline;
}
.missing-copy a:hover {
    color: var(--km-blue);
}
.missing-list {
    width: 100%;
    margin: 0;
    border-left: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    background: #fff;
}
.missing-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 86px;
    padding: 7px 10px;
    border-top: 1px solid #ececec;
}
.missing-row:first-child { border-top: 0; }
.missing-row:nth-child(even) { background: #f7f7f7; }
.missing-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.missing-thumb img {
    display: block;
    width: auto;
    max-width: 72px;
    max-height: 72px;
    border: 1px solid #a9a9a9;
    border-radius: 0;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
    transform-origin: left center;
    position: relative;
    z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
    .missing-thumb img:hover {
        transform: scale(2.5);
        z-index: 50;
        box-shadow: 0 8px 20px rgba(0,0,0,.35);
    }
}
.missing-name {
    min-width: 0;
    color: #111;
    font-size: 10pt;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

hr { border: 0; border-top: 1px solid #cfcfcf; }


/* Umschaltbare Archivansichten – bewusst im klassischen Kultmags-Stil */
.view-switcher {
    width: min(760px, 100%);
    margin: 0 auto 15px;
    padding: 5px 0 4px;
    text-align: center;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
}
.view-switcher-label {
    color: #555;
    font-weight: 700;
    margin-right: 7px;
}
.view-switcher-separator {
    color: #999;
    margin: 0 7px;
}
.view-switcher-button {
    color: #000;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-weight: 400;
}
.view-switcher-button:visited { color: #000; }
.view-switcher-button:hover {
    color: var(--km-blue);
    background: transparent;
    text-decoration: underline;
}
.view-switcher-button.active,
.view-switcher-button.active:visited {
    color: var(--km-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}


.folder-preview { display: none; }
.media-folder-info { min-width: 0; }
.media-folder-size {
    display: block;
    margin-top: 5px;
    color: var(--km-muted);
    font-size: 11px;
}

/* MAGAZINE – Liste (nahe am bisherigen Layout) */
.archive-mags.view-list .folder-preview { display: none; }

/* MAGAZINE – Grafiken */
.archive-mags.view-grid .magazine-folder-list {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 16px;
}
.archive-mags.view-grid .folder-row {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    border: 0;
    text-align: center;
    gap: 7px;
}
.archive-mags.view-grid .folder-preview {
    display: flex;
    height: 165px;
    align-items: center;
    justify-content: center;
}
.archive-mags.view-grid .folder-preview img {
    max-height: 160px;
    max-width: 100%;
    object-fit: contain;
}
.archive-mags.view-grid .folder-preview.fallback img {
    width: 72px;
    height: auto;
}
.archive-mags.view-grid .folder-name { justify-content: center; }
.archive-mags.view-grid .folder-icon,
.archive-mags.view-grid .folder-progress,
.archive-mags.view-grid .folder-dlc,
.archive-mags.view-grid .folder-size { display: none; }

/* MAGAZINE – Grafiken + Liste */
.archive-mags.view-mixed .folder-list { width: min(760px, 100%); }
.archive-mags.view-mixed .folder-row {
    grid-template-columns: 105px minmax(0, 1fr) 58px 58px 110px;
    min-height: 92px;
}
.archive-mags.view-mixed .folder-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}
.archive-mags.view-mixed .folder-preview img {
    max-width: 95px;
    max-height: 82px;
    object-fit: contain;
}
.archive-mags.view-mixed .folder-preview.fallback img { width: 48px; }

/* BÜCHER/SPIELE – Liste */
.archive-books.view-list .media-folder-grid,
.archive-games.view-list .media-folder-grid {
    width: min(760px, 100%);
    display: block;
}
.archive-books.view-list .media-folder-card,
.archive-games.view-list .media-folder-card {
    display: block;
    min-height: 0;
    padding: 7px 4px;
    border-bottom: 1px solid #eee;
}
.archive-books.view-list .media-folder-image,
.archive-games.view-list .media-folder-image { display: none; }
.archive-books.view-list .media-folder-info,
.archive-games.view-list .media-folder-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.archive-books.view-list .media-folder-size,
.archive-games.view-list .media-folder-size { margin: 0; white-space: nowrap; }

/* BÜCHER/SPIELE – reine Grafikansicht */
.archive-books.view-grid .media-folder-grid,
.archive-games.view-grid .media-folder-grid {
    width: min(760px, 100%);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px 16px;
}
.archive-books.view-grid .media-folder-card,
.archive-games.view-grid .media-folder-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
    text-align: center;
}
.archive-books.view-grid .media-folder-image,
.archive-games.view-grid .media-folder-image {
    height: 180px;
    justify-content: center;
    align-items: center;
}
.archive-books.view-grid .media-folder-image img,
.archive-games.view-grid .media-folder-image img {
    width: auto;
    max-width: 100%;
    max-height: 175px;
    object-fit: contain;
}
.archive-books.view-grid .media-folder-image.fallback img,
.archive-games.view-grid .media-folder-image.fallback img { width: 72px; height: auto; }
.archive-books.view-grid .media-folder-size,
.archive-games.view-grid .media-folder-size { display: none; }

/* BÜCHER/SPIELE – Grafiken + Liste: bisheriges Layout, ergänzt um Größe */
.archive-books.view-mixed .media-folder-grid,
.archive-games.view-mixed .media-folder-grid {
    width: min(760px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 980px) {
    .magazine-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
    .detail-item { grid-template-columns: 300px minmax(0,1fr); }
}

@media (max-width: 720px) {
    body { font-size: 10pt; }
    .site-main { margin-top: 20px; }
    .main-nav { gap: 2px 8px; }
    .main-nav a { padding: 5px 3px; }
    .main-nav a + a::before { display: none; }
    .donate { justify-content: center; margin-right: 0; margin-top: 8px; }
    .magazine-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .media-folder-grid { grid-template-columns: 1fr; }
    .detail-item { grid-template-columns: 1fr; }
    .detail-media { order: 0; }
    .detail-text { order: 1; }
    .folder-row { grid-template-columns: minmax(0,1fr) 52px 52px 92px; }
    .folder-size { grid-column: 4; }
    .news-content table { max-width: 100% !important; width: 100% !important; }
    .news-content img { max-width: 100%; height: auto; }
}

@media (max-width: 430px) {
    .site-header, .site-main { width: min(100% - 14px, 1180px); }
    .magazine-grid { grid-template-columns: 1fr 1fr; gap: 22px 6px; }
    .mag-cover { max-width: 135px; }
    .media-folder-card { grid-template-columns: 90px 1fr; }
    .media-folder-image img { width: 82px; }
    .folder-row { grid-template-columns: 1fr 52px 52px; gap: 2px 6px; }
    .folder-name { grid-column: 1 / -1; }
    .folder-progress { grid-column: 1; justify-content: flex-start; padding-left: 30px; }
    .folder-dlc { grid-column: 2; justify-content: flex-start; }
    .folder-size { grid-column: 3; padding-left: 0; text-align: right; }
}


@media (max-width: 980px) {
    .archive-mags.view-grid .magazine-folder-list,
    .archive-books.view-grid .media-folder-grid,
    .archive-games.view-grid .media-folder-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }
}

@media (max-width: 720px) {
    .archive-mags.view-grid .magazine-folder-list,
    .archive-books.view-grid .media-folder-grid,
    .archive-games.view-grid .media-folder-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .archive-books.view-mixed .media-folder-grid,
    .archive-games.view-mixed .media-folder-grid { grid-template-columns: 1fr; }
    .archive-mags.view-mixed .folder-row {
        grid-template-columns: 82px minmax(0,1fr) 52px 52px 92px;
    }
    .archive-mags.view-mixed .folder-preview img { max-width: 76px; max-height: 72px; }
}

@media (max-width: 430px) {
    .view-switcher { font-size: 9px; }
    .view-switcher-label { display: block; margin: 0 0 2px; }
    .view-switcher-separator { margin: 0 4px; }
    .archive-mags.view-mixed .folder-row {
        grid-template-columns: 70px 1fr 48px 48px;
        gap: 4px 6px;
    }
    .archive-mags.view-mixed .folder-preview { grid-row: 1 / span 2; grid-column: 1; }
    .archive-mags.view-mixed .folder-name { grid-column: 2 / -1; }
    .archive-mags.view-mixed .folder-progress { grid-column: 2; justify-content: flex-start; }
    .archive-mags.view-mixed .folder-dlc { grid-column: 3; justify-content: flex-start; }
    .archive-mags.view-mixed .folder-size { grid-column: 4; }
}

/* V6: dezente SEO-Einleitung auf der Startseite */
.homepage-intro {
    width: min(980px, 100%);
    margin: 0 auto 24px;
    text-align: center;
    color: #444;
}
.homepage-intro h1 {
    margin: 0 0 7px;
    color: #222;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
}
.homepage-intro p {
    max-width: 850px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.55;
}

/* V6: Mobile – Archivübersichten bewusst neu geordnet statt Desktop-Raster zu quetschen. */
@media (max-width: 720px) {
    html { overflow-x: hidden; }
    body { min-width: 0; }
    .site-header,
    .site-main { width: calc(100% - 20px); }
    .site-main { margin-top: 18px; }

    .brand img {
        width: auto;
        max-width: 100%;
        max-height: 180px;
    }

    .main-nav {
        gap: 0;
        line-height: 1.25;
        padding: 2px 0;
    }
    .main-nav a {
        padding: 7px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    .homepage-intro { margin-bottom: 18px; }
    .homepage-intro h1 { font-size: 15px; }
    .homepage-intro p { font-size: 10px; text-align: left; }

    .view-switcher {
        width: 100%;
        margin: 0 auto 14px;
        padding: 7px 4px;
        line-height: 1.8;
    }
    .view-switcher-button { padding: 4px 3px; }

    /* Magazin-LISTE: Name oben, Statusinfos sauber in einer zweiten Zeile. */
    .archive-mags.view-list .magazine-folder-list { width: 100%; }
    .archive-mags.view-list .folder-row {
        grid-template-columns: minmax(0,1fr) auto auto;
        gap: 5px 10px;
        min-height: 48px;
        padding: 7px 4px;
    }
    .archive-mags.view-list .folder-name {
        grid-column: 1 / -1;
        min-height: 24px;
    }
    .archive-mags.view-list .folder-progress {
        grid-column: 1;
        justify-content: flex-start;
        padding-left: 30px;
    }
    .archive-mags.view-list .folder-dlc {
        grid-column: 2;
        justify-content: center;
        min-width: 42px;
    }
    .archive-mags.view-list .folder-size {
        grid-column: 3;
        min-width: 74px;
        font-size: 11px;
    }

    /* Magazin-GRAFIK: zwei große, tappbare Kacheln pro Zeile. */
    .archive-mags.view-grid .magazine-folder-list {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }
    .archive-mags.view-grid .folder-row { min-width: 0; }
    .archive-mags.view-grid .folder-preview { height: 145px; }
    .archive-mags.view-grid .folder-preview img { max-height: 140px; }
    .archive-mags.view-grid .folder-name {
        width: 100%;
        justify-content: center;
        text-align: center;
        overflow-wrap: anywhere;
    }

    /* Magazin-GRAFIK+LISTE: Vorschau links, Text rechts, Metadaten darunter. */
    .archive-mags.view-mixed .folder-list { width: 100%; }
    .archive-mags.view-mixed .folder-row {
        grid-template-columns: 84px minmax(0,1fr) auto auto;
        grid-template-rows: auto auto;
        min-height: 88px;
        gap: 4px 8px;
        padding: 7px 2px;
    }
    .archive-mags.view-mixed .folder-preview {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    .archive-mags.view-mixed .folder-preview img {
        max-width: 78px;
        max-height: 76px;
    }
    .archive-mags.view-mixed .folder-name {
        grid-column: 2 / -1;
        align-self: end;
        overflow-wrap: anywhere;
    }
    .archive-mags.view-mixed .folder-progress {
        grid-column: 2;
        justify-content: flex-start;
        align-self: start;
    }
    .archive-mags.view-mixed .folder-dlc {
        grid-column: 3;
        align-self: start;
    }
    .archive-mags.view-mixed .folder-size {
        grid-column: 4;
        align-self: start;
        min-width: 68px;
        font-size: 10px;
    }

    /* Bücher/Spiele – Liste als kompakte, klare Zeilen. */
    .archive-books.view-list .media-folder-grid,
    .archive-games.view-list .media-folder-grid { width: 100%; }
    .archive-books.view-list .media-folder-card,
    .archive-games.view-list .media-folder-card { padding: 9px 4px; }
    .archive-books.view-list .media-folder-info,
    .archive-games.view-list .media-folder-info {
        gap: 8px;
        align-items: flex-start;
    }
    .archive-books.view-list .media-folder-title,
    .archive-games.view-list .media-folder-title {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .archive-books.view-list .media-folder-size,
    .archive-games.view-list .media-folder-size { flex: 0 0 auto; font-size: 10px; }

    /* Bücher/Spiele – Grafikansicht. */
    .archive-books.view-grid .media-folder-grid,
    .archive-games.view-grid .media-folder-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }
    .archive-books.view-grid .media-folder-image,
    .archive-games.view-grid .media-folder-image { height: 150px; }
    .archive-books.view-grid .media-folder-image img,
    .archive-games.view-grid .media-folder-image img { max-height: 145px; }
    .archive-books.view-grid .media-folder-title,
    .archive-games.view-grid .media-folder-title { overflow-wrap: anywhere; }

    /* Bücher/Spiele – Grafik + Liste als einspaltige Karten. */
    .archive-books.view-mixed .media-folder-grid,
    .archive-games.view-mixed .media-folder-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .archive-books.view-mixed .media-folder-card,
    .archive-games.view-mixed .media-folder-card {
        grid-template-columns: 86px minmax(0,1fr);
        gap: 10px;
        min-height: 92px;
        padding: 5px 0;
        border-bottom: 1px solid #eee;
    }
    .archive-books.view-mixed .media-folder-image,
    .archive-games.view-mixed .media-folder-image { justify-content: center; }
    .archive-books.view-mixed .media-folder-image img,
    .archive-games.view-mixed .media-folder-image img {
        width: auto;
        max-width: 82px;
        max-height: 86px;
    }

    /* Inhalte innerhalb eines Magazins/Buchs/Spiels */
    .magazine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 8px;
    }
    .item-title { min-height: 34px; font-size: 11px; }
    .mag-cover { max-width: min(145px, 100%); }
    .download-icons { gap: 10px; }

    .detail-item { padding-top: 10px; }
    .book-cover { max-width: min(300px, 88vw); }

    /* Alte News-Tabellen dürfen horizontal scrollen statt das ganze Layout zu sprengen. */
    .news-content {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .news-content > table { min-width: 0; }
}

@media (max-width: 430px) {
    .site-header,
    .site-main { width: calc(100% - 12px); }
    .main-nav a { padding: 7px 6px; font-size: 10px; }
    .view-switcher-label { display: block; margin-bottom: 1px; }

    .archive-mags.view-grid .magazine-folder-list,
    .archive-books.view-grid .media-folder-grid,
    .archive-games.view-grid .media-folder-grid { gap: 19px 8px; }

    .archive-mags.view-grid .folder-preview { height: 130px; }
    .archive-mags.view-grid .folder-preview img { max-height: 125px; }
    .archive-books.view-grid .media-folder-image,
    .archive-games.view-grid .media-folder-image { height: 138px; }
    .archive-books.view-grid .media-folder-image img,
    .archive-games.view-grid .media-folder-image img { max-height: 133px; }

    .archive-mags.view-mixed .folder-row {
        grid-template-columns: 72px minmax(0,1fr) 40px;
        grid-template-rows: auto auto auto;
    }
    .archive-mags.view-mixed .folder-preview { grid-row: 1 / 4; }
    .archive-mags.view-mixed .folder-name { grid-column: 2 / 4; }
    .archive-mags.view-mixed .folder-progress { grid-column: 2; }
    .archive-mags.view-mixed .folder-dlc { grid-column: 3; }
    .archive-mags.view-mixed .folder-size {
        grid-column: 2 / 4;
        text-align: left;
    }

    .archive-mags.view-list .folder-progress { padding-left: 28px; }
    .magazine-grid { column-gap: 5px; }
}


/* V11: alle drei Archivdarstellungen schließen exakt mit dem Darstellungsbalken ab. */
.archive-folder-view {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* V10: Impressum – bewusst schlicht im klassischen kultmags.com-Stil. */
.impressum-page {
    width: min(760px, 100%);
    margin: 0 auto 34px;
    color: #111;
}
.impressum-page > h1 {
    margin: 0 0 7px;
    text-align: center;
    font-size: 16px;
    line-height: 1.3;
    color: #111;
    letter-spacing: .2px;
}
.impressum-rule {
    height: 1px;
    margin: 0 0 24px;
    background: #bdbdbd;
}
.impressum-rule.bottom {
    margin: 22px 0 7px;
}
.impressum-section {
    margin: 0 0 22px;
    padding: 0;
}
.impressum-section h2 {
    margin: 0 0 7px;
    padding: 4px 7px;
    background: #111;
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}
.impressum-section p {
    margin: 7px 7px 0;
    line-height: 1.55;
}
.impressum-section a {
    color: #000;
    text-decoration: underline;
}
.impressum-section a:hover {
    color: var(--km-blue);
}
.impressum-updated {
    margin: 0;
    text-align: right;
    color: var(--km-muted);
    font-size: 10px;
}

/* V9: Portrait-Mobile – Archivübersichten komplett neu angeordnet.
   Ziel: keine Desktop-Spalten in einen 320–430px Bildschirm quetschen. */
@media (max-width: 600px) {
    .site-header,
    .site-main {
        width: calc(100% - 16px);
        max-width: 100%;
    }

    .site-main { margin-top: 14px; }
    .nav-support::before { margin: 0 8px 0 4px; }
    .nav-support button { padding-left: 5px; padding-right: 5px; }
    .archive { min-width: 0; overflow: visible; }
    .archive-folder-view { min-width: 0; max-width: 100%; }

    /* Umschalter kompakt und fingerfreundlich. */
    .view-switcher {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 0;
        width: 100%;
        margin: 0 0 16px;
        padding: 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        font-size: 9px;
        line-height: 1.25;
        text-align: center;
    }
    .view-switcher-label {
        grid-column: 1 / -1;
        display: block;
        padding: 5px 2px 3px;
        color: #777;
        font-weight: 400;
    }
    .view-switcher-button {
        display: flex;
        min-width: 0;
        min-height: 37px;
        align-items: center;
        justify-content: center;
        padding: 6px 3px;
        border-top: 1px dotted #ddd;
        overflow-wrap: anywhere;
    }
    .view-switcher-button + .view-switcher-button { border-left: 1px dotted #ddd; }
    .view-switcher-separator { display: none; }

    /* Magazine – Standard "Grafiken + Liste": echte mobile Karten mit nur zwei Spalten. */
    .archive-mags.view-mixed .magazine-folder-list {
        width: 100%;
        display: block;
    }
    .archive-mags.view-mixed .folder-row {
        display: grid;
        grid-template-columns: 78px minmax(0,1fr);
        grid-template-rows: auto auto auto;
        gap: 3px 10px;
        width: 100%;
        min-height: 92px;
        padding: 8px 2px;
        border-bottom: 1px solid #e8e8e8;
    }
    .archive-mags.view-mixed .folder-preview {
        grid-column: 1;
        grid-row: 1 / 4;
        display: flex;
        width: 78px;
        min-width: 0;
        align-items: center;
        justify-content: center;
    }
    .archive-mags.view-mixed .folder-preview img {
        width: auto;
        max-width: 74px;
        max-height: 84px;
        object-fit: contain;
    }
    .archive-mags.view-mixed .folder-name {
        grid-column: 2;
        grid-row: 1;
        display: block;
        min-width: 0;
        align-self: end;
        line-height: 1.25;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .archive-mags.view-mixed .folder-progress {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
        min-height: 20px;
    }
    .archive-mags.view-mixed .folder-progress:empty { display: none; }
    .archive-mags.view-mixed .folder-dlc {
        grid-column: 2;
        grid-row: 3;
        justify-content: flex-start;
        min-height: 20px;
    }
    .archive-mags.view-mixed .folder-dlc:empty { display: none; }
    .archive-mags.view-mixed .folder-size {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        align-self: center;
        min-width: 0;
        padding: 0;
        font-size: 9px;
        color: var(--km-muted);
        text-align: right;
    }
    .archive-mags.view-mixed .folder-dlc:not(:empty) + .folder-size {
        padding-left: 42px;
    }

    /* Magazine – Liste: nur Name + eine kompakte Infozeile. */
    .archive-mags.view-list .folder-row {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto auto;
        gap: 4px 8px;
        width: 100%;
        min-height: 50px;
        padding: 7px 2px;
    }
    .archive-mags.view-list .folder-name {
        grid-column: 1 / -1;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .archive-mags.view-list .folder-progress {
        grid-column: 1;
        justify-content: flex-start;
        padding-left: 0;
    }
    .archive-mags.view-list .folder-dlc { grid-column: 2; }
    .archive-mags.view-list .folder-size {
        grid-column: 3;
        min-width: 0;
        font-size: 9px;
    }

    /* Reine Grafikansichten: zwei gleichbreite Kacheln, ohne Mindestbreiten. */
    .archive-mags.view-grid .magazine-folder-list,
    .archive-books.view-grid .media-folder-grid,
    .archive-games.view-grid .media-folder-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 18px 8px;
    }
    .archive-mags.view-grid .folder-row,
    .archive-books.view-grid .media-folder-card,
    .archive-games.view-grid .media-folder-card {
        min-width: 0;
        width: 100%;
    }
    .archive-mags.view-grid .folder-preview,
    .archive-books.view-grid .media-folder-image,
    .archive-games.view-grid .media-folder-image {
        height: 128px;
        min-width: 0;
    }
    .archive-mags.view-grid .folder-preview img,
    .archive-books.view-grid .media-folder-image img,
    .archive-games.view-grid .media-folder-image img {
        width: auto;
        max-width: 100%;
        max-height: 124px;
    }
    .archive-mags.view-grid .folder-name,
    .archive-books.view-grid .media-folder-title,
    .archive-games.view-grid .media-folder-title {
        display: block;
        min-width: 0;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
    }

    /* Bücher/Spiele – Mixed als klassische mobile Zeile. */
    .archive-books.view-mixed .media-folder-grid,
    .archive-games.view-mixed .media-folder-grid {
        width: 100%;
        display: block;
    }
    .archive-books.view-mixed .media-folder-card,
    .archive-games.view-mixed .media-folder-card {
        display: grid;
        grid-template-columns: 78px minmax(0,1fr);
        gap: 9px;
        width: 100%;
        min-height: 90px;
        padding: 7px 2px;
        border-bottom: 1px solid #e8e8e8;
    }
    .archive-books.view-mixed .media-folder-image,
    .archive-games.view-mixed .media-folder-image {
        display: flex;
        width: 78px;
        justify-content: center;
        align-items: center;
    }
    .archive-books.view-mixed .media-folder-image img,
    .archive-games.view-mixed .media-folder-image img {
        width: auto;
        max-width: 74px;
        max-height: 82px;
    }
    .archive-books.view-mixed .media-folder-info,
    .archive-games.view-mixed .media-folder-info {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .archive-books.view-mixed .media-folder-title,
    .archive-games.view-mixed .media-folder-title {
        min-width: 0;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .archive-books.view-mixed .media-folder-size,
    .archive-games.view-mixed .media-folder-size {
        margin-top: 4px;
        font-size: 9px;
    }

    /* Listen bei Büchern/Spielen: Größe unter dem Namen statt daneben. */
    .archive-books.view-list .media-folder-info,
    .archive-games.view-list .media-folder-info {
        display: block;
    }
    .archive-books.view-list .media-folder-size,
    .archive-games.view-list .media-folder-size {
        display: block;
        margin-top: 2px;
        white-space: normal;
        color: var(--km-muted);
        font-size: 9px;
    }

    /* Detailübersicht der einzelnen Magazine: auch auf 320px zuverlässig zwei Spalten. */
    .magazine-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 20px 6px;
        width: 100%;
    }
    .magazine-card { min-width: 0; }
    .mag-cover { width: auto; max-width: min(132px, 100%); }
    .download-icons { gap: 7px; }
    .download-icons img { max-height: 30px; }

    .legal-page > h1 { font-size: 17px; margin-bottom: 14px; }
    .legal-card { padding: 12px 11px; margin-bottom: 12px; }
    .legal-card h2 { font-size: 13px; }
    .legal-data > div {
        grid-template-columns: 1fr;
        gap: 1px;
        padding: 7px 0;
    }
    .legal-data dd { padding-left: 0; }
}

@media (max-width: 360px) {
    .site-header,
    .site-main { width: calc(100% - 10px); }
    .main-nav a { padding-left: 5px; padding-right: 5px; }
    .view-switcher { font-size: 8px; }
    .archive-mags.view-mixed .folder-row,
    .archive-books.view-mixed .media-folder-card,
    .archive-games.view-mixed .media-folder-card {
        grid-template-columns: 68px minmax(0,1fr);
        gap: 7px;
    }
    .archive-mags.view-mixed .folder-preview,
    .archive-books.view-mixed .media-folder-image,
    .archive-games.view-mixed .media-folder-image { width: 68px; }
    .archive-mags.view-mixed .folder-preview img,
    .archive-books.view-mixed .media-folder-image img,
    .archive-games.view-mixed .media-folder-image img { max-width: 64px; }
    .archive-mags.view-grid .folder-preview,
    .archive-books.view-grid .media-folder-image,
    .archive-games.view-grid .media-folder-image { height: 116px; }
    .archive-mags.view-grid .folder-preview img,
    .archive-books.view-grid .media-folder-image img,
    .archive-games.view-grid .media-folder-image img { max-height: 112px; }
}


/* V12: SPENDEN im mobilen Menü exakt wie die übrigen Menüpunkte skalieren. */
.nav-support button {
    font-family: inherit;
    line-height: inherit;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .nav-support button {
        font-size: 11px;
        padding: 7px 8px;
    }
}
@media (max-width: 360px) {
    .nav-support button {
        font-size: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }
}


/* V14: MISSING auf schmalen Displays kompakt und vollständig lesbar. */
@media (max-width: 600px) {
    .missing-page { width: 100%; margin-bottom: 24px; }
    .missing-page > h1 { font-size: 15px; }
    .missing-rule { margin-bottom: 18px; }
    .missing-section { margin-bottom: 18px; }
    .missing-section h2 { font-size: 10px; padding: 5px 6px; }
    .missing-copy { padding-left: 4px; padding-right: 4px; }
    .missing-copy p { text-align: left; line-height: 1.45; }
    .missing-row {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 9px;
        min-height: 68px;
        padding: 6px 7px;
    }
    .missing-thumb img { max-width: 54px; max-height: 56px; }
    .missing-name { font-size: 9.5pt; }
}


/* V16: "Über das Projekt" – klarer Aufbau + leicht pflegbare Freigaben */
.about-page {
    width: min(1080px, 100%);
    margin: 0 auto 36px;
    color: #111;
}
.about-head {
    margin-bottom: 24px;
}
.about-head h1 {
    margin: 0 0 7px;
    text-align: center;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: .2px;
}
.about-rule {
    height: 1px;
    margin-bottom: 20px;
    background: #bdbdbd;
}
.about-lead {
    max-width: 900px;
    margin: 0 auto;
    font-size: 11pt;
    line-height: 1.65;
    text-align: center;
}
.about-section {
    margin: 0 0 24px;
}
.about-section > h2 {
    margin: 0;
    padding: 5px 8px;
    background: #111;
    color: #fff;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
}
.about-copy {
    padding: 4px 8px 2px;
}
.about-copy p {
    margin: 10px 0 0;
    line-height: 1.6;
    text-align: justify;
}
.about-support-note {
    margin: 14px 0 2px;
    padding: 10px 12px;
    border-left: 4px solid #111;
    background: #f4f4f4;
    line-height: 1.55;
}
.support-section #paypalbutton {
    margin: 18px 0 8px;
}
.approval-intro {
    margin-bottom: 14px;
}
.approval-maintenance-note {
    color: #666;
    font-size: 9pt;
}
.approval-group {
    margin-top: 22px;
}
.approval-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #aaa;
    font-weight: 700;
    font-size: 10.5pt;
}
.approval-count {
    min-width: 28px;
    padding: 1px 7px;
    border: 1px solid #bbb;
    border-radius: 10px;
    background: #f4f4f4;
    color: #555;
    font-size: 8.5pt;
    text-align: center;
}
.approval-columns {
    column-count: 2;
    column-gap: 14px;
}
.approval-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid #d7d7d7;
    background: #fff;
    break-inside: avoid;
    page-break-inside: avoid;
    vertical-align: top;
}
.approval-card h3 {
    margin: 0;
    padding: 6px 8px;
    background: #f0f0f0;
    border-bottom: 1px solid #d7d7d7;
    font-size: 10pt;
    line-height: 1.35;
}
.approval-text {
    padding: 8px;
    line-height: 1.5;
    text-align: left;
}
.approval-text b,
.approval-text strong {
    font-weight: 700;
}

@media (max-width: 760px) {
    .approval-columns {
        column-count: 1;
    }
    .about-lead {
        text-align: left;
    }
}


/* V18: Magazin-Detailansicht zuverlässig zentrieren + Projektseite kompakter */
.magazine-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    gap: 24px 10px;
}
.magazine-grid .magazine-card {
    flex: 0 0 150px;
    width: 150px;
    max-width: 150px;
}

.about-page {
    width: min(1000px, 100%);
    margin: 0 auto 24px;
}
.about-head {
    margin: 0 0 10px;
}
.about-head h1,
.about-rule {
    display: none;
}
.about-lead {
    max-width: none;
    margin: 0;
    padding: 0 6px 2px;
    font-size: 10pt;
    line-height: 1.45;
    text-align: left;
}
.about-section {
    margin: 0 0 14px;
}
.about-section > h2 {
    padding: 4px 7px;
    font-size: 10px;
}
.about-copy {
    padding: 2px 7px 0;
}
.about-copy p {
    margin: 6px 0 0;
    line-height: 1.42;
}
.about-support-note {
    margin: 8px 0 0;
    padding: 7px 9px;
    border-left-width: 3px;
    line-height: 1.4;
}
.support-section #paypalbutton {
    margin: 10px 0 4px;
}
.approval-intro {
    margin-bottom: 6px;
}
.approval-maintenance-note {
    margin-top: 3px !important;
    font-size: 8.5pt;
}
.approval-group {
    margin-top: 12px;
}
.approval-group-title {
    margin: 0 0 5px;
    padding: 4px 6px;
    font-size: 9.5pt;
}
.approval-count {
    min-width: 24px;
    padding: 0 6px;
    font-size: 8pt;
}
.approval-columns {
    column-gap: 10px;
}
.approval-card {
    margin: 0 0 6px;
}
.approval-card h3 {
    padding: 4px 6px;
    font-size: 9pt;
    line-height: 1.25;
}
.approval-text {
    padding: 5px 6px;
    font-size: 9pt;
    line-height: 1.35;
}

/* V19: echte Zentrierung der Heftreihen + stark vereinfachte Projektseite */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    justify-content: center;
    align-items: start;
    gap: 24px 10px;
    width: min(950px, 100%);
    margin-left: auto;
    margin-right: auto;
}
.magazine-grid .magazine-card {
    width: 150px;
    max-width: 150px;
    min-width: 150px;
}

.compact-about {
    width: min(760px, 100%);
    margin: 0 auto 22px;
}
.about-intro-copy {
    padding: 0 5px;
    font-size: 9pt;
    line-height: 1.4;
}
.about-intro-copy p {
    margin: 0 0 8px;
}
.about-paypal {
    margin: 7px 0 12px;
}
.compact-approvals {
    margin-top: 8px;
}
.compact-approvals > h2 {
    margin: 0 0 4px;
    padding: 4px 6px;
    font-size: 10px;
}
.compact-approvals .approval-intro {
    padding: 0 5px;
    margin: 0 0 5px;
    font-size: 9pt;
}
.compact-approvals .approval-intro p {
    margin: 0;
}
.approval-group {
    margin-top: 9px;
}
.approval-group-title-simple {
    margin: 0 0 3px;
    padding: 2px 5px 3px;
    border-bottom: 1px solid #bdbdbd;
    font-size: 9pt;
    font-weight: 700;
}
.approval-group-title-simple span {
    font-weight: 400;
    color: #666;
}
.approval-list {
    padding: 0 5px;
}
.approval-row {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #ececec;
    font-size: 9pt;
    line-height: 1.35;
}
.approval-row:last-child {
    border-bottom: 0;
}
.approval-name,
.approval-text-inline,
.approval-separator {
    font-size: inherit;
}
.approval-name {
    font-weight: 700;
}


/* V20: Leerraum vor dem Copyright-Hinweis minimiert */
.site-main { min-height: 0; }
.site-footer { padding-top: 10px; }


/* V21: Heftreihenbreite wird serverseitig aus der tatsächlichen Anzahl berechnet.
   Freigaben als saubere zweispaltige Liste. */
.magazine-grid {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

.approval-list {
    padding: 0 5px;
}
.approval-row {
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #ececec;
    font-size: 9pt;
    line-height: 1.35;
}
.approval-name,
.approval-text-inline {
    font-size: inherit;
    line-height: inherit;
}
.approval-name {
    font-weight: 700;
}
.approval-separator {
    display: none;
}
\n\n/* V22: definitive Zentrierung der sichtbaren Heftkarten.\n   Der Container ist nur so breit wie seine tatsaechlich gerenderten Karten,\n   maximal sechs Karten pro Zeile. Dadurch gibt es bei 1-5 Heften keinen\n   unsichtbaren freien Spaltenbereich. */\n.magazine-grid {\n    display: flex !important;\n    flex-flow: row wrap !important;\n    justify-content: center !important;\n    align-items: flex-start !important;\n    gap: 24px 10px !important;\n    width: max-content !important;\n    max-width: 950px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    grid-template-columns: none !important;\n}\n.magazine-grid .magazine-card {\n    flex: 0 0 150px !important;\n    width: 150px !important;\n    min-width: 150px !important;\n    max-width: 150px !important;\n}\n
/* V23: Freigaben robust zweispaltig ausrichten */
.approval-row {
    display: flex !important;
    align-items: flex-start !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    font-size: 9pt !important;
    line-height: 1.35 !important;
}
.approval-name {
    display: block !important;
    flex: 0 0 225px !important;
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important;
    margin-right: 24px !important;
    font-size: 9pt !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}
.approval-text-inline {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 9pt !important;
    line-height: 1.35 !important;
}


/* V24: Projektseite auf exakt dieselbe Inhaltsbreite wie das Impressum begrenzt. */
.compact-about { width: min(760px, 100%); }