/**************** iPAD ****************/

@media only screen and (max-width: 1200px) {

    .glossar--initial, .glossar--eintrag {
        flex: 0 0 calc((100% - 20px) / 3);
    }

    #typefaces {
        grid-template-columns: repeat(2, 1fr);
    }

        /* Grid-Kontext */
    .col-6info {
        grid-column: span 8;
    }

    /* Flex-Kontext (row--center) */
    .row--center .col-6info {
        width: 66.666%;
    }
}


/**************** MOBILE ****************/

@media only screen and (max-width: 768px) {

* {
    --xxs: 7px;
    --xs: 9px;
    --s: 10px;
    --m: 12px;
    --l: 18px;
}

html, body {
    scroll-padding-top: 60px;
    overscroll-behavior: none;
    touch-action: manipulation;
}

h1 { font-size: var(--m); }


/*********** MENÜ ***********/

#head { padding: 20px 20px 22px 20px; }

#sub-menu {
    position: fixed;
    z-index: 100;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    width: 65%;
}

    .nav { margin-right: 5px; }

    .nav:last-child {
        margin-right: 0px;
        margin-left: 3px;
    }


/*********** TABLE / INDEX ***********/

#index { touch-action: none; }

    .slide > * { margin-right: 5px; }

    /* normale cols: kompakter auf Mobile */
    .slide .col-2                           { width: calc(25vw - 20px); }
    .slide .col-3                           { width: calc(33.333vw - 20px); }
    .slide .col-4, .slide .col-5,
    .slide .col-6                           { width: calc(50vw - 25px); }
    .slide .col-8, .slide .col-10,
    .slide .col-12                          { width: calc(100vw - 40px); }

    /* s-Varianten: größer/breiter auf Mobile */
    .slide .col-2s, .slide .col-3s         { width: 50vw; }
    .slide .col-4s, .slide .col-5s         { width: 70vw; }
    .slide .col-6s                          { width: 80vw; }
    .slide .col-8s                          { width: 80vw; } /* war 80‚vw – Tippfehler */
    .slide .col-10s, .slide .col-12s       { width: calc(100vw - 40px); }


/*********** AUFBAU ***********/

#content, #content-type {
    padding: 0px 20px 20px 20px;
    background: #fff;
}

.row {
    gap: 10px;
    margin-bottom: 15px;
}

        /* Alle cols → volle Breite */
        .col-2, .col-3, .col-4, .col-5,
        .col-6, .col-6info, .col-8, .col-10, .col-12 {
        grid-column: span 12;
        }

        .row--center .col-6info,
        { width: 100%;}

#typefaces {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
}


/*** ABSTÄNDE ***/

.space-s  { height: 30px; }
.space-m  { height: 50px; }
.space-l  { height: 100px; }
.space-xl { height: 200px; }


/*********** CATALOGUE ***********/

.eula-eintrag { margin-bottom: 15px; }

    /**************** EULA ****************/

    .eula-einzug {
        padding-left: 32px;
        text-indent: -32px;
    }


/*********** SCHRIFT UNTERSEITE ***********/

#info, #specimens, #features, #test, #buy {
    padding: 0px 0px;
    margin-bottom: 50px;
}

    .editable-div { height: 30vh; }

/* TYPE TESTER */
select.tes,
input.test[type="text"],
.slideslize-wrap { height: 26px; }

    select.tes {
        width: 120px;
        padding: 2px 5px;
    }

    input.test[type="text"] {
        width: 54px;
        padding: 2px 5px;
    }

    select.tes:hover          { padding-left: 10px; }
    input.test[type="text"]:hover { padding-left: 10px; }

    input.test[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; }
    input.test[type="range"]::-moz-range-thumb     { width: 14px; height: 14px; }


/**************** INFO UNTERSEITE ****************/

.glossar--initial, .glossar--eintrag {
    flex: 0 0 calc((100% - 10px) / 2); /* 2 Spalten */
}

    span.initial { width: 30px; }

.info-einzug {
    padding-left: 66px;
    text-indent: -66px;
}


/**************** SLIDER ****************/

.slider-count {
    top: 7px;
    right: 4px;
}

.current-slide, .slide-total {
    padding: 1px 4px;
    margin-right: 1px;
    font-weight: 550;
    font-size: var(--xs);
}


/**************** FOOTER ****************/

div#footer {
    margin-top: 0px;
    margin-bottom: 0px;
}

    .legal-container { flex-direction: column; }
    .legal-column    { max-width: 100%; }

}