/*
------------------------------------------------------------
Projekt: arsvenditio · INKE HAGEN · Monster-Wiki
Datei: monsterwiki.css
Version: 0.1.3
Stand: 2026-08-22

Nur MONSTERWIKI-spezifisches Layout.
Typografie, Farben, Buttons und Footer kommen aus dem globalen CSS-Core.
------------------------------------------------------------
*/


/* =========================================================
   TYPOGRAFIE · WIE DIE AKTUELLEN INKE-HAGEN-SEITEN
   Die globalen Core-Dateien bleiben führend. Diese Definitionen
   sichern dieselben Projektfonts auch in der Standalone-Ansicht.
========================================================= */

@font-face {
    font-family: "PTSans-Narrow";
    src: url("../../assets/fonts/PTSans-Narrow/PTSansNarrow-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "PTSans-NarrowBold";
    src: url("../../assets/fonts/PTSans-NarrowBold/PTSansNarrow-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Rubik Dirt";
    src: url("../../assets/fonts/RubikDirt-Regular/RubikDirt-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

body {
    font-family: var(--ars-font-body, "PTSans-Narrow", "Arial Narrow", Arial, sans-serif);
    color: var(--ars-color-grey, #666666);
}

.wikiProductText h2 {
    color: var(--ih-red, #CF0E12);
    font-family: "Rubik Dirt", cursive;
    font-weight: 400;
    line-height: .95;
}

.wikiProductText h3,
.wikiTextBlock h2 {
    font-family: "PTSans-NarrowBold", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
}

.wikiProductText p,
.wikiTextBlock p,
.wikiPersonalized,
.wikiProductLead {
    font-family: var(--ars-font-body, "PTSans-Narrow", "Arial Narrow", Arial, sans-serif);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:24px;
}

body{
    margin:0;
    overflow-x:hidden;
}

.monsterWiki{
    width:100%;
    margin:0;
    padding:0 0 64px;
}

/* =========================================================
   EINSTIEG
========================================================= */

.wikiIntro{
    display:grid;
    grid-template-columns:50vw minmax(0,1fr);
    align-items:center;
    width:100%;
    min-height:50vw;
}

.wikiIntroText{
    width:min(760px, 100%);
    justify-self:center;
    padding:48px clamp(24px,5vw,80px);
    text-align:center;
}

.wikiIntro__headline{
    margin:0 0 8px;
}

.wikiIntro__subheadline{
    margin:0 0 24px;
}

/* =========================================================
   GROSSER HINWEIS
========================================================= */

.wikiNotice{
    width:100%;
    padding:64px clamp(20px,6vw,96px);
}

.wikiTextBlock{
    width:min(940px,100%);
    margin:0 auto;
}

.wikiTextBlock--center{
    text-align:center;
}

.wikiTextBlock p{
    margin:0 0 1em;
}

/* =========================================================
   PRODUKTABSCHNITTE
========================================================= */

.wikiProduct{
    display:grid;
    grid-template-columns:50vw minmax(0,1fr);
    align-items:start;
    width:100%;
    scroll-margin-top:24px;
}

.wikiProduct--image-right{
    grid-template-columns:minmax(0,1fr) 50vw;
}

.wikiProductText{
    width:min(760px,100%);
    align-self:center;
    justify-self:center;
    padding:clamp(38px,5vw,80px) clamp(24px,5vw,80px);
}

/* Bild links -> Text rechts und linksbündig.
   Bild rechts -> Text links und rechtsbündig. */
.wikiProduct--image-left .wikiProductText{
    text-align:left;
}

.wikiProduct--image-right .wikiProductText{
    text-align:right;
}

.wikiProductText h2,
.wikiTextBlock h2{
    margin-top:0;
}

.wikiProductText h3{
    margin-top:1.15em;
}

.wikiProductText p{
    margin:0 0 1em;
}

.wikiPersonalized{
    margin-top:-0.3em !important;
}

.wikiProductLead{
    margin-bottom:0.7em !important;
}

/* =========================================================
   QUADRATISCHE RAND-BILDER
========================================================= */

.wikiEdgeImage{
    width:50vw;
    height:50vw;
    overflow:hidden;
}

.wikiEdgeImage picture,
.wikiEdgeImage img{
    display:block;
    width:100%;
    height:100%;
}

.wikiEdgeImage img{
    object-fit:cover;
    user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}

.wikiEdgeImage--left{
    justify-self:start;
}

.wikiEdgeImage--right{
    justify-self:end;
}

/* =========================================================
   GRÖSSEN + WASCHBEFEHLE
========================================================= */

.wikiInfoImages{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
}

.wikiInfoImages{
    align-items:start;
}

.wikiInfoImages picture,
.wikiInfoImages img{
    display:block;
    width:100%;
    height:auto;
}

.wikiInfoImages img{
    max-width:100%;
    object-fit:contain;
}

/* =========================================================
   ABSCHLUSS
========================================================= */

.wikiShopCta{
    display:flex;
    justify-content:center;
    width:100%;
    padding:64px 20px 0;
}

/* =========================================================
   BREAKPOINT 2 · TABLET / KLEINERE DISPLAYS · 50 %
========================================================= */

@media (min-width:700px) and (max-width:1099px){
    .wikiIntro,
    .wikiProduct,
    .wikiProduct--image-right{
        grid-template-columns:50vw minmax(0,1fr);
    }

    .wikiIntro{
        grid-template-columns:minmax(0,1fr) 50vw;
        min-height:50vw;
    }

    .wikiEdgeImage{
        width:50vw;
        height:50vw;
    }

    .wikiProductText,
    .wikiIntroText{
        padding:36px clamp(20px,4vw,48px);
    }

}

/* =========================================================
   BREAKPOINT 1 · HANDY · 100 %
========================================================= */

@media (max-width:699px){
    .wikiIntro,
    .wikiProduct,
    .wikiProduct--image-right,
    .wikiProduct--image-left{
        display:flex;
        flex-direction:column;
    }

    .wikiIntroText,
    .wikiProductText{
        width:100%;
        padding:44px 20px;
    }

    .wikiProduct--image-left .wikiProductText,
    .wikiProduct--image-right .wikiProductText{
        text-align:left;
    }

    .wikiIntroImage{
        order:2;
    }

    .wikiProduct .wikiEdgeImage{
        order:1;
    }

    .wikiProduct .wikiProductText{
        order:2;
    }

    .wikiEdgeImage{
        width:100vw;
        height:100vw;
    }

    .wikiNavigation{
        gap:8px;
    }

    .wikiNotice{
        padding:48px 20px;
    }

    .wikiInfoImages{
        grid-template-columns:1fr;
    }

    .wikiShopCta{
        padding-top:48px;
    }
}