/*
Theme Name: MotorFiktion CoverNews Child
Description: CoverNews-Child-Theme für MotorFiktion
Author: MotorFiktion
Template: covernews
Version: 1.3.0
Text Domain: motorfiktion-covernews-child
*/

/*
Eigene CSS-Anpassungen ab hier einfügen
*/

/* MotorFiktion: Auf der Startseite Kategorien sowie Autor/Datum
   in den Beitrags-Teasern ausblenden. */
body.home .figure-categories,
body.home .cat-links,
body.home .entry-meta,
body.home .post-item-metadata,
body.home .post-item-metadata.entry-meta,
body.home .author-links,
body.home .author-link,
body.home .posted-on,
body.home .byline {
    display: none !important;
}

/* Joli TOC wird nach dem ersten Absatz eingefügt. CoverNews rückt normale
   Textblöcke auf Single-Posts ein; das automatisch eingefügte TOC übernimmt
   diesen Block-Abstand nicht. Deshalb denselben Inhaltsbereich erzwingen. */
/* Joli Table of Contents: exakt an die CoverNews-Textspalte anpassen. */
body.single-post .entry-content > #wpj-jtoc {
    float: none !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    body.single-post .entry-content > #wpj-jtoc {
        width: 70% !important;
        max-width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
    }
}

@media (max-width: 767px) {
    body.single-post .entry-content > #wpj-jtoc {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Einzelartikel ohne Seitenspalte:
   Nur die äußere Artikelspalte wird auf volle verfügbare Breite gesetzt.
   Die bestehende Typografie im Artikel bleibt unverändert:
   schmale Textblöcke, breite Bilder/alignwide. */
body.single-post #secondary {
    display: none !important;
}

body.single-post .content-area {
    width: 100% !important;
    max-width: 1200px !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Einzelartikel: feste Lesespalte von 550 px.
   Breite Bilder bleiben davon unberührt und können die Artikelbreite nutzen. */
@media (min-width: 768px) {
    body.single-post .entry-content > p,
    body.single-post .entry-content > h2,
    body.single-post .entry-content > h3,
    body.single-post .entry-content > h4,
    body.single-post .entry-content > h5,
    body.single-post .entry-content > h6,
    body.single-post .entry-content > ul,
    body.single-post .entry-content > ol,
    body.single-post .entry-content > blockquote,
    body.single-post .entry-content > #wpj-jtoc {
        width: 550px !important;
        max-width: 550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.single-post #wpj-jtoc .wpj-jtoc--toc,
    body.single-post #wpj-jtoc .wpj-jtoc--header,
    body.single-post #wpj-jtoc .wpj-jtoc--header-main,
    body.single-post #wpj-jtoc .wpj-jtoc--title,
    body.single-post #wpj-jtoc .wpj-jtoc--title-label,
    body.single-post #wpj-jtoc .wpj-jtoc--body,
    body.single-post #wpj-jtoc .wpj-jtoc--nav,
    body.single-post #wpj-jtoc .wpj-jtoc--items {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
    }

    body.single-post #wpj-jtoc .wpj-jtoc--title {
        transform: translateX(0) !important;
        left: 0 !important;
    }

    body.single-post .covernews-breadcrumbs {
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.single-post .covernews-breadcrumbs > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* MotorFiktion: kompakter Magazin-Header mit Logo direkt in der Menüleiste. */
@media (min-width: 992px) {
    #masthead .masthead-banner { display: none !important; }
    #site-navigation.main-navigation { background: #1d2125 !important; border-bottom: 3px solid #e5e5e5; }
    #site-navigation > .container { max-width: 1200px; margin: 0 auto; }
    #site-navigation .bottom-bar-flex,
    #site-navigation .bottom-bar-center,
    #site-navigation .navigation-container,
    #site-navigation .main-navigation { min-height: 68px; display: flex; align-items: center; }
    #site-navigation .bottom-bar-center { flex: 1 1 auto; }
    #site-navigation .menu.main-menu,
    #site-navigation #primary-menu { width: 100%; }
    #site-navigation #primary-menu { display: flex; align-items: center; min-height: 68px; margin: 0; }
    #site-navigation #primary-menu > li:not(.kr-nav-logo) > a { color: #fff !important; font-weight: 700; font-size: 15px; line-height: 68px; padding: 0 12px; text-transform: uppercase; }
    #site-navigation #primary-menu > li:not(.kr-nav-logo) > a:hover,
    #site-navigation #primary-menu > li.current-menu-item:not(.kr-nav-logo) > a { color: #e33a2e !important; }
    #site-navigation .kr-nav-logo { display: flex; align-items: center; align-self: stretch; margin-right: 12px; padding: 0; }
    #site-navigation .kr-nav-logo .kr-header-logo { width: 170px; height: 58px; padding: 4px 8px; margin: 5px 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #1d2125; }
    #site-navigation .kr-nav-logo .kr-header-logo img { display: block; width: 100%; height: auto; max-height: 50px; object-fit: contain; }
    #site-navigation .bottom-bar-left { display: none; }
    #site-navigation .bottom-bar-right { margin-left: auto; }
}

@media (max-width: 991px) {
    #site-navigation .kr-nav-logo { display: none !important; }
}

/* ==========================================================
   Kurvenräuber – bildstarke Magazin-Homepage
   Eigenständiges Editorial-Layout, Hauptteaser max. 1400 px
   ========================================================== */
body .kr-mag-home {
    --kr-home-width: 1400px;
    --kr-home-gap: clamp(24px, 3vw, 48px);
    --kr-home-edge: clamp(18px, 3vw, 42px);
    background: #fff;
    color: #151515;
    padding: clamp(28px, 5vw, 72px) var(--kr-home-edge) 80px;
}
body .kr-mag-home a { color: inherit; text-decoration: none; }
body .kr-mag-home a:hover { color: inherit; }

body .kr-mag-hero,
body .kr-mag-grid,
body .kr-mag-stream,
body .kr-mag-pagination,
body .kr-mag-empty {
    width: 100%;
    max-width: var(--kr-home-width);
    margin-left: auto;
    margin-right: auto;
}

body .kr-mag-image {
    display: block;
    overflow: hidden;
    background: #ececec;
}
body .kr-mag-image img,
body .kr-mag-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .45s ease;
}
body.home a.kr-mag-image:hover img { transform: scale(1.018); }

body .kr-mag-hero { margin-bottom: clamp(60px, 8vw, 118px); }
body .kr-mag-hero-image { width: 100%; }
body .kr-mag-hero-copy {
    max-width: 980px;
    padding-top: clamp(22px, 3vw, 42px);
}
body .kr-mag-kicker {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
body .kr-mag-hero h1 {
    max-width: 1100px;
    margin: 0;
    font-size: clamp(38px, 5.25vw, 78px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 800;
}
body .kr-mag-hero p {
    max-width: 760px;
    margin: 22px 0 0;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.55;
    color: #555;
}

body .kr-mag-grid-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kr-home-gap);
    margin-bottom: clamp(76px, 9vw, 130px);
}
body .kr-mag-card .kr-mag-kicker { margin-top: 20px; }
body .kr-mag-card h2 {
    margin: 0;
    max-width: 590px;
    font-size: clamp(27px, 3vw, 46px);
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 800;
}

body .kr-mag-stream { border-top: 1px solid #d8d8d8; }
body .kr-mag-row {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(280px, .78fr);
    gap: clamp(32px, 6vw, 92px);
    align-items: center;
    padding: clamp(44px, 6vw, 88px) 0;
    border-bottom: 1px solid #d8d8d8;
}
body .kr-mag-row-reverse { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.42fr); }
body .kr-mag-row-reverse .kr-mag-image { order: 2; }
body .kr-mag-row-reverse .kr-mag-row-copy { order: 1; }
body .kr-mag-row h2 {
    margin: 0;
    font-size: clamp(28px, 3.25vw, 52px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 800;
}
body .kr-mag-row p {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: #606060;
}

body .kr-mag-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 48px;
}
body .kr-mag-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #cfcfcf;
    font-weight: 700;
}
body .kr-mag-pagination .current { background: #151515; border-color: #151515; color: #fff; }

@media (max-width: 767px) {
    body .kr-mag-home { padding-top: 24px; padding-bottom: 56px; }
    body .kr-mag-hero { margin-bottom: 58px; }
    body .kr-mag-hero h1 { line-height: 1.02; }
    body .kr-mag-grid-top { grid-template-columns: 1fr; gap: 48px; margin-bottom: 64px; }
    body .kr-mag-row,
    body .kr-mag-row-reverse { grid-template-columns: 1fr; gap: 24px; padding: 46px 0; }
    body .kr-mag-row-reverse .kr-mag-image,
    body .kr-mag-row-reverse .kr-mag-row-copy { order: initial; }
    body .kr-mag-row p { margin-top: 14px; }
}


/* MotorFiktion 1.3 – eigenständige Homepage */
body.motorfiktion-magazine-front .kr-mag-home {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 48px 24px 80px;
}
body.motorfiktion-magazine-front .kr-mag-hero,
body.motorfiktion-magazine-front .kr-mag-grid-top,
body.motorfiktion-magazine-front .kr-mag-stream,
body.motorfiktion-magazine-front .kr-mag-pagination {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}