/* Huber Technik: die 21 Folien aus der PDF.
   Ab 600px Inhaltsbreite stehen alle Elemente an ihren PDF-Koordinaten (960 x 540 pt).
   Darunter werden dieselben Elemente zu Bloecken in Lesereihenfolge. */

/* Ersatzschriften fuer Geraete ohne Arial / Arial Black (SIL Open Font License, siehe css/fonts/huber) */
@font-face{
    font-family: "Arimo";
    src: url(fonts/huber/arimo-latin-400-normal.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Arimo";
    src: url(fonts/huber/arimo-latin-700-normal.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Arimo";
    src: url(fonts/huber/arimo-latin-400-italic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face{
    font-family: "Archivo Black";
    src: url(fonts/huber/archivo-black-latin-400-normal.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.folien_halter{
    border-top: 4px solid rgba(143,19,10,1.0);
    padding-top: 12px;
    min-width: 0;
}

/* Kickstart setzt Spalten hier auf width:auto, Container Queries brauchen aber eine feste Breite */
@media all and (max-width: 768px){
    .grid .folien_halter{
        width: 100%;
    }
}

.folie{
    container-type: inline-size;
    max-width: 1500px;
    margin: 0 auto 14px auto;
    text-align: left;
}

.folie_buehne{
    --u: calc(100cqw / 960);
    position: relative;
    width: 100%;
    aspect-ratio: 960 / 540;
    overflow: hidden;
    isolation: isolate;
    background-color: #9baf28;
    color: #000;
    font-family: Arial, Arimo, Helvetica, sans-serif;
}

.folie_weiss .folie_buehne{
    background-color: #fff;
}

.folie_buehne *{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
    list-style: none;
}

/* Gruppen bestehen nur fuer die Handy-Ansicht, am Desktop zaehlt die Buehne */
.folie_buehne :is(header,div,article,ul,li,h1,h2,h3,h4,p,dl,dt,dd){
    display: contents;
}

.folie_buehne h1::before,
.folie_buehne h1::after{
    content: none;
}

.folie_buehne .bild,
.folie_buehne .schleier,
.folie_buehne .haken{
    position: absolute;
    display: block;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    max-width: none;
}

.folie_buehne .schleier{
    background-color: rgba(155,175,40,0.588);
}

.folie_buehne .haken{
    z-index: 500;
}

.folie_buehne .vektoren{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.folie_buehne .zeile{
    position: absolute;
    z-index: 500;
    left: calc(var(--x) * var(--u));
    top: calc(var(--o) * var(--u));
    font-size: calc(var(--g) * var(--u));
    line-height: 1;
    white-space: pre;
}

.folie_buehne .lauf{
    font-size: calc(var(--g) * var(--u));
    line-height: 1;
}

.folie .schwer{
    font-family: "Arial Black", "Archivo Black", Arial, Arimo, sans-serif;
    font-weight: 900;
}

.folie .fett{
    font-weight: 700;
}

.folie .kursiv{
    font-style: italic;
}

/* Poster S. 17: am Desktop das Bild, der gesetzte Text bleibt fuer Screenreader und Suchmaschinen */
.folie_buehne .nur_schmal{
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.folie_buehne .nur_schmal img{
    display: none;
}


/* Handy: gleiche Inhalte und Farben, aber untereinander */
@container (max-width: 599px){

    .folie_buehne{
        aspect-ratio: auto;
        font-size: 1rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .folie_buehne :is(header,div,article,ul,h1,h2,h3,h4,p,dl){
        display: block;
    }

    .folie_buehne li{
        display: block;
        margin-bottom: 0.6em;
    }

    .folie_buehne p{
        margin-bottom: 0.6em;
    }

    .folie_buehne .vektoren,
    .folie_buehne .deko{
        display: none;
    }

    .folie_buehne .zeile{
        position: static;
        display: inline;
        font-size: calc(0.72rem + var(--g) * 0.02rem);
        line-height: 1.35;
        white-space: normal;
    }

    .folie_buehne .lauf{
        font-size: calc(0.72rem + var(--g) * 0.02rem);
        line-height: 1.35;
    }

    .folie_buehne .blockzeile{
        display: block;
    }

    .folie_buehne .bild{
        position: static;
        width: 100%;
        height: auto;
    }

    .folie_buehne .folie_kopf{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 10px;
        padding: 14px 14px 10px 14px;
    }

    .folie_buehne .folie_kopf_rechts{
        justify-content: flex-end;
    }

    .folie_buehne .folie_kopf :is(h2,.folie_titelgruppe){
        flex: 1 1 150px;
        min-width: 0;
        line-height: 1.15;
    }

    .folie_buehne .folie_kopf .zeile{
        line-height: 1.15;
    }

    .folie_buehne .folie_kopf .logo{
        flex: 0 0 96px;
        width: 96px;
    }

    .folie_buehne .folie_block{
        padding: 4px 14px 14px 14px;
    }

    .folie_buehne .folie_gruen{
        padding-top: 14px;
        background-color: #9baf28;
    }

    .folie_buehne .folie_block > .bild{
        margin-bottom: 10px;
    }

    .folie_buehne .einleitung{
        margin-bottom: 12px;
    }

    /* Rahmen mit Luecke rechts wie in der PDF */
    .folie_buehne .folie_rahmen{
        position: relative;
        margin-bottom: 14px;
        padding: 14px;
        border: 6px solid var(--rahmen);
        border-right: 0;
    }

    .folie_buehne .folie_rahmen::before,
    .folie_buehne .folie_rahmen::after{
        content: '';
        position: absolute;
        right: 0;
        width: 6px;
        height: 22%;
        background-color: var(--rahmen);
    }

    .folie_buehne .folie_rahmen::before{
        top: 0;
    }

    .folie_buehne .folie_rahmen::after{
        bottom: 0;
    }

    .folie_buehne .rahmen_weiss{
        --rahmen: #fff;
    }

    .folie_buehne .rahmen_grau{
        --rahmen: #d0cece;
    }

    .folie_buehne .mittig{
        text-align: center;
    }

    .folie_buehne .folie_rahmen h3,
    .folie_buehne .folie_rahmen h4{
        margin-bottom: 0.3em;
    }

    .folie_buehne .folie_rahmen ul{
        margin-bottom: 0.5em;
    }

    .folie_buehne .folie_rahmen li{
        margin-bottom: 0.2em;
    }

    /* Einsatzbereiche S. 3 */
    .folie_buehne .folie_karten{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
        gap: 8px;
    }

    .folie_buehne .folie_karte{
        position: relative;
        min-height: 190px;
        padding: 10px;
        overflow: hidden;
    }

    .folie_buehne .folie_karte .bild,
    .folie_buehne .folie_karte .schleier{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .folie_buehne .folie_karte h3,
    .folie_buehne .folie_karte ul{
        position: relative;
    }

    .folie_buehne .folie_karte h3{
        margin-bottom: 0.4em;
    }

    .folie_buehne .folie_karte .zeile{
        line-height: 1.2;
    }

    .folie_buehne .folie_karte li{
        margin-bottom: 0.25em;
    }

    .folie_buehne .folie_tiere{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 6px;
        margin-top: 12px;
    }

    .folie_buehne .folie_tiere .bild{
        width: 18.5%;
        min-width: 0;
    }

    /* Produkte mit Pruefsiegeln S. 7, 8, 11, 12 */
    .folie_buehne .folie_produkt{
        margin-bottom: 18px;
    }

    .folie_buehne .folie_produkt h3{
        margin-bottom: 8px;
        text-align: center;
    }

    .folie_buehne .folie_produkt .bild{
        margin-bottom: 10px;
    }

    .folie_buehne .folie_siegel{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 10px;
        background-color: #fff;
    }

    .folie_buehne .folie_siegel .bild{
        width: 100%;
        max-width: 300px;
        margin: 0;
    }

    /* Collagen: zweispaltig, Bilder bleiben unbeschnitten */
    .folie_buehne .folie_collage{
        column-count: 2;
        column-gap: 6px;
    }

    .folie_buehne .folie_collage .bild{
        margin-bottom: 6px;
        break-inside: avoid;
    }

    .folie_buehne .folie_vorteile li{
        margin-bottom: 0.25em;
    }

    .folie_buehne .produktbild{
        margin: 10px 0 14px 0;
    }

    .folie_buehne .folie_kriterien h3{
        margin-bottom: 0.3em;
    }

    .folie_buehne .haken{
        position: static;
        display: inline-block;
        width: 1.05em;
        height: 0.75em;
        margin-left: 0.3em;
    }

    /* Titelseite S. 1: Kuh, Dreieck und Titel bleiben zusammen */
    .folie_titelseite .folie_buehne{
        aspect-ratio: 1 / 1;
    }

    .folie_titelseite .folie_buehne .vektoren{
        display: block;
    }

    .folie_titelseite .folie_buehne .titelkuh{
        position: absolute;
        left: 2%;
        top: 8%;
        width: 62%;
    }

    .folie_titelseite .folie_buehne .logo{
        position: absolute;
        left: auto;
        right: 3%;
        top: 3%;
        width: 34%;
    }

    .folie_titelseite .folie_buehne h1{
        position: absolute;
        z-index: 500;
        left: 4%;
        bottom: 4%;
    }

    .folie_titelseite .folie_buehne h1 .zeile{
        font-size: 1.45rem;
        line-height: 1.15;
    }

    /* Poster S. 17 */
    .folie_buehne .nur_breit{
        display: none;
    }

    .folie_poster .folie_buehne{
        background-color: #fff;
    }

    .folie_buehne .nur_schmal{
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    .folie_buehne .nur_schmal img{
        display: block;
        width: 100%;
        height: auto;
    }

    .folie_buehne .poster_kopf{
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 14px 10px 14px;
    }

    .folie_buehne .poster_kopf h2{
        flex: 1 1 150px;
        min-width: 0;
        font-size: 1.2rem;
        line-height: 1.25;
    }

    .folie_buehne .poster_gruentext{
        color: #9baf28;
    }

    .folie_buehne .nur_schmal .poster_logo{
        flex: 0 0 84px;
        width: 84px;
    }

    .folie_buehne .poster_abschnitt{
        padding: 12px 14px;
    }

    .folie_buehne .poster_gruen{
        background-color: #9baf28;
    }

    .folie_buehne .poster_marke{
        display: inline-block;
        margin-bottom: 8px;
        padding: 4px 8px;
        background-color: #9baf28;
        color: #fff;
        font-size: 0.85rem;
        letter-spacing: 0.02em;
    }

    .folie_buehne .poster_marke_hell{
        background-color: #8d9f24;
    }

    .folie_buehne .poster_band{
        margin-bottom: 6px;
        padding: 6px 10px;
        background-color: #fff;
    }

    .folie_buehne .poster_ja{
        margin-bottom: 0.2em;
        font-weight: 700;
    }

    .folie_buehne .poster_ja::before{
        content: '\2713\00a0';
    }

    .folie_buehne .poster_liste{
        margin-bottom: 10px;
    }

    .folie_buehne .poster_liste li{
        margin: 0 0 0.25em 0.8em;
    }

    .folie_buehne .poster_liste li::before{
        content: '\203A\00a0';
    }

    .folie_buehne .poster_beschriftung{
        margin-top: 8px;
        margin-bottom: 0;
    }

    .folie_buehne .poster_tabelle{
        margin-bottom: 10px;
        padding: 8px 10px;
        background-color: rgba(255,255,255,0.88);
    }

    .folie_buehne .poster_tabelle dt{
        display: block;
        margin-top: 8px;
        color: #7d8e1c;
        font-weight: 700;
    }

    .folie_buehne .poster_tabelle dt:first-child{
        margin-top: 0;
    }

    .folie_buehne .poster_tabelle dd{
        display: block;
        margin-bottom: 0.2em;
    }

    .folie_buehne .poster_tabelle dd::before{
        content: '\25AA\00a0';
        color: #9baf28;
    }
}


/* Sehr alte Browser ohne Container Queries bekommen die einfache Blockansicht */
@supports not (container-type: inline-size){
    .folie_buehne{
        aspect-ratio: auto;
        padding: 14px;
    }

    .folie_buehne :is(header,div,article,ul,li,h1,h2,h3,h4,p,dl,dt,dd){
        display: block;
    }

    .folie_buehne .zeile,
    .folie_buehne .bild{
        position: static;
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.35;
        white-space: normal;
    }

    .folie_buehne .lauf{
        font-size: inherit;
    }

    .folie_buehne .vektoren,
    .folie_buehne .deko,
    .folie_buehne .schleier,
    .folie_buehne .nur_breit{
        display: none;
    }

    .folie_buehne .nur_schmal{
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    .folie_buehne .nur_schmal img{
        display: block;
        max-width: 100%;
        height: auto;
    }
}