/* IKUNIX v1.38
   Einheitliche Desktop-/Laptop-Breite für alle öffentlichen Unterseiten.
   Referenz: die bestehenden Leistungs-/Inhaltsseiten.
*/

:root{
    --ikunix-subpage-shell:1340px;
    --ikunix-subpage-inner:1180px;
}

/* Nur Laptop/Desktop: Mobile bleibt unverändert. */
@media (min-width:821px){

    /*
     * Ein einheitlicher äußerer Seitenrahmen.
     * 1340px inklusive der vorhandenen Section-Paddings ergibt auf normalen
     * Laptop-/Desktop-Breiten denselben visuellen Satzspiegel wie die
     * Leistungsseiten.
     */
    .subpage-main > .site-breadcrumbs,
    .subpage-main > .subpage-hero,
    .service-category-section,
    .service-catalog-section,
    .product-detail-hero,
    .product-detail-content,
    .product-media-section,
    .page-content-section,
    .contact-section,
    .wiki-index-section,
    .wiki-detail-section,
    .legal-content-section,
    .legal-documents-section,
    .blog-index-section,
    .request-cart-section,
    .product-seo-section,
    .collection-seo-content,
    .collection-faq-section,
    .collection-closing-cta{
        width:min(var(--ikunix-subpage-shell),calc(100% - 40px));
        max-width:var(--ikunix-subpage-shell);
        margin-left:auto;
        margin-right:auto;
    }

    /* Hero/Breadcrumbs folgen exakt demselben linken und rechten Raster. */
    .subpage-main > .subpage-hero{
        width:min(var(--ikunix-subpage-shell),calc(100% - 40px));
    }

    .subpage-main > .site-breadcrumbs{
        width:min(var(--ikunix-subpage-shell),calc(100% - 40px));
    }

    /*
     * Inhaltsebene: 1180px entspricht der nutzbaren Breite innerhalb des
     * 1340px-Rahmens bei den bestehenden Desktop-Sections.
     */
    .blog-grid,
    .blog-index-page .blog-card:only-child,
    .wiki-alphabet,
    .wiki-groups,
    .wiki-detail-layout,
    .legal-content,
    .legal-document-list,
    .request-cart-shell,
    .request-order-form,
    .product-seo-article,
    .product-faq-list,
    .collection-seo-content .page-content,
    .collection-faq-section .faq-list{
        width:100%;
        max-width:var(--ikunix-subpage-inner);
        margin-left:auto;
        margin-right:auto;
    }

    /* Blog: ein einzelner Beitrag nutzt die verfügbare Breite wirklich aus. */
    .blog-index-page .blog-card:only-child{
        grid-column:1 / -1;
    }

    /*
     * Klassische Textseiten (Blogdetail, Wiki, Rechtliches) waren bisher
     * teilweise nur 920–980px breit. Der Rahmen wird auf das gemeinsame
     * Unterseitenmaß erweitert; die Typografie selbst bleibt unverändert.
     */
    .wiki-article,
    .legal-content{
        max-width:var(--ikunix-subpage-inner);
    }

    .page-content-section > .page-content:not(:has(.page-block)){
        width:100%;
        max-width:var(--ikunix-subpage-inner);
        margin-left:auto;
        margin-right:auto;
    }

    /*
     * Kategorien und Produkt-/SEO-Bereiche verwenden denselben Außenrahmen,
     * ohne ihre jeweilige Grid-Struktur zu verändern.
     */
    .service-category-section,
    .service-catalog-section,
    .product-seo-section,
    .product-media-section{
        box-sizing:border-box;
    }
}

/* Zwischen Laptop und Tablet etwas mehr Luft zum Fensterrand. */
@media (min-width:821px) and (max-width:1100px){
    .subpage-main > .site-breadcrumbs,
    .subpage-main > .subpage-hero,
    .service-category-section,
    .service-catalog-section,
    .product-detail-hero,
    .product-detail-content,
    .product-media-section,
    .page-content-section,
    .contact-section,
    .wiki-index-section,
    .wiki-detail-section,
    .legal-content-section,
    .legal-documents-section,
    .blog-index-section,
    .request-cart-section,
    .product-seo-section,
    .collection-seo-content,
    .collection-faq-section,
    .collection-closing-cta{
        width:calc(100% - 32px);
    }
}