*{font-family:Arial}

:root {
    --bg-color-dark: #080f50;
    --bg-color-light: #080f501f;
    --second-color: #f2f1ea;
    --letter-blass: #8589a8;
    --color-white: #ffffff;
    --main-bg-color: rgb(256,256,256, 0.8);
    --color-black: #000000;
    --color-yellow: #ffff00;
    --color-neutral-gray: #cacaca;
    --filter-color: #02867e;
    --success-color: #1f7a52;
    --success-bg: #e3f3ea;
    --success-line: #a9d9be;
    --error-color: #ad3347;
    --error-bg: #fbe8ea;
    --error-line: #eab2ba;
    --orange-color: #f5a623;
    --dialog-color: #ffffff;
    --dialoggr-color: rgb(225 245 255 0.85);
    --bg_edit_login: rgba(255, 255, 255, 0.1);
    --hell: #F8FAFD;
    --tablegr-color: rgb(8, 15, 80, 0.1);
}

/*      #################       Verwaltungs-/Footer-Redesign: Box-Sizing-Fix     ##############            */
/*      width:100% + padding braucht border-box, sonst laufen Inputs/Textareas/Buttons über den Kartenrand     */
/*      bewusst NICHT per "*" auf alle Nachfahren, das hätte auch Fremd-Komponenten wie CaptchaTest getroffen  */

.auth-field input,
.auth-field textarea,
.auth-submit,
.auth-social-btn,
.auth-btn-outline {
    box-sizing: border-box;
}

@media only screen and (min-width: 1px ) {

    /*      #################       Buttons (mpButton) — fehlte bislang unter 800px, Button war auf Mobile ungestylt     ##############            */

    .mpButton {
        display: inline-block;
        padding: 0.6rem 1rem;
        background-color: var(--second-color);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-size: 1rem;
    }

    .mpButtonaktiv {
        display: inline-block;
        padding: 0.6rem 1rem;
        background-color: var(--bg-color-dark);
        color: var(--color-white);
        border: none;
        border-radius: 15px;
        cursor: pointer;
        font-size: 1rem;
    }

    /*      #################       Kapitelwahl     ##############            */

    .grid-container {
        border: 1px solid grey;
        display: grid;
        grid-template-columns: auto;
        gap: 0.9rem;
    }

    .kapitelliste {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .grid-item {
        border: 2px solid grey;
        padding: 0.6rem 0.75rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        cursor: pointer;
    }

    .grid-item-name {
        font-weight: 600;
        font-size: 1.05rem;
    }

    .grid-item-hint {
        font-size: 0.82rem;
        color: var(--letter-blass);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .zettelZentrum {
        background-color: var(--second-color);
        border: 1px solid grey;
        border-radius: 8px;
        padding: 0.9rem 1rem;
        font-size: 1rem;
        cursor: pointer;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .zettelZentrum.zettel-empty {
        color: var(--letter-blass);
    }

    .KapitelTitel {
        color: var(--bg-color-dark);
        font-size: 1.4rem;
        font-weight: bold;
    }

    .ZettelTitel {
        color: var(--bg-color-dark);
        font-size: 1rem;
        font-weight: bold;
    }

    .Zettelhtmlrawtext {
        font-size: 0.95rem;
    }

    .tochapter {
        margin-top: 0.6rem;
    }

    .pfeile {
        display: inline-block;
        background-color: var(--orange-color);
        color: var(--color-black);
        font-weight: bold;
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        cursor: pointer;
    }

    /*      #################       Verwaltungsseiten (Login etc)     ##############            */

    .auth-shell {
        display: flex;
        flex-direction: column;
        background-color: var(--color-white);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 60px -24px rgb(8 15 80 / 35%), 0 2px 8px rgb(8 15 80 / 8%);
        max-width: 960px;
        margin: 1.5rem auto;
    }

    .auth-brand {
        background-color: var(--bg-color-dark);
        color: var(--color-white);
        padding: 1.6rem 1.4rem 1.4rem;
        position: relative;
        overflow: hidden;
    }

    .auth-logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 700;
        font-size: 1rem;
    }

    .auth-brand h1 {
        font-size: 1.25rem;
        line-height: 1.25;
        margin: 1rem 0 0.35rem;
        font-weight: 700;
    }

    .auth-brand p {
        margin: 0;
        color: rgb(255 255 255 / 72%);
        font-size: 0.92rem;
        line-height: 1.5;
        max-width: 34ch;
    }

    .bubble-art {
        display: none;
    }

    .brand-foot {
        display: none;
    }

    .auth-panel {
        background-color: var(--second-color);
        padding: 1.6rem 1.4rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-card {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .auth-card h2 {
        margin: 0 0 0.3rem;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--bg-color-dark);
    }

    .auth-lead {
        margin: 0 0 1.4rem;
        font-size: 0.88rem;
        color: var(--letter-blass);
    }

    .auth-social {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.3rem;
    }

    .auth-social-btn {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        padding: 0.65rem 0.9rem;
        border-radius: 9px;
        border: 1px solid var(--tablegr-color);
        background-color: var(--color-white);
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--bg-color-dark);
        cursor: pointer;
    }

    .auth-social-btn:hover {
        border-color: var(--filter-color);
    }

    .social-mark {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 800;
        color: var(--color-white);
        flex: none;
    }

    .social-mark.google {
        background-color: #ea4335;
    }

    .social-mark.facebook {
        background-color: #1877f2;
    }

    .auth-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0.2rem 0 1.2rem;
        color: var(--letter-blass);
        font-size: 0.78rem;
    }

    .auth-divider::before,
    .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--tablegr-color);
    }

    .auth-alert {
        display: flex;
        gap: 0.55rem;
        align-items: flex-start;
        padding: 0.65rem 0.8rem;
        border-radius: 8px;
        font-size: 0.82rem;
        margin-bottom: 1rem;
    }

    .auth-alert-error {
        background-color: var(--error-bg);
        border: 1px solid var(--error-line);
        color: var(--error-color);
    }

    .auth-alert-success {
        background-color: var(--success-bg);
        border: 1px solid var(--success-line);
        color: var(--success-color);
    }

    .auth-field {
        margin-bottom: 1rem;
    }

    .auth-field-captcha {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .auth-field label {
        display: block;
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--letter-blass);
        margin-bottom: 0.35rem;
    }

    .auth-field input,
    .auth-field textarea {
        width: 100%;
        padding: 0.62rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--tablegr-color);
        background-color: var(--color-white);
        font-size: 0.92rem;
        color: var(--bg-color-dark);
        font-family: inherit;
    }

    .auth-field textarea {
        min-height: 6rem;
        resize: vertical;
    }

    .auth-field input:focus,
    .auth-field textarea:focus {
        outline: none;
        border-color: var(--filter-color);
        box-shadow: 0 0 0 3px rgb(2 134 126 / 15%);
    }

    .auth-field .validation-message {
        display: block;
        color: var(--error-color);
        font-size: 0.76rem;
        margin-top: 0.3rem;
    }

    .auth-submit {
        display: inline-block;
        width: 100%;
        padding: 0.72rem 1rem;
        border: none;
        border-radius: 9px;
        background-color: var(--orange-color);
        color: var(--color-black);
        font-size: 0.94rem;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        margin-top: 0.2rem;
    }

    .auth-submit:hover {
        filter: brightness(1.05);
    }

    .auth-links {
        margin-top: 1.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.84rem;
    }

    .auth-links a {
        color: var(--filter-color);
        text-decoration: none;
    }

    .auth-links a:hover {
        text-decoration: underline;
    }

    .auth-links .muted-link a {
        color: var(--letter-blass);
    }

    .auth-message-shell {
        max-width: 520px;
        margin: 2.5rem auto;
        padding: 0 1rem;
    }

    .auth-message-card {
        background-color: var(--color-white);
        border-radius: 16px;
        padding: 2rem 1.75rem;
        box-shadow: 0 24px 60px -24px rgb(8 15 80 / 35%), 0 2px 8px rgb(8 15 80 / 8%);
    }

    .auth-message-logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--bg-color-dark);
        margin-bottom: 1.2rem;
    }

    .auth-message-card h1 {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--bg-color-dark);
        margin: 0 0 0.75rem;
    }

    .auth-message-card.error h1 {
        color: var(--error-color);
    }

    .auth-message-card p {
        margin: 0 0 0.75rem;
        font-size: 0.92rem;
        line-height: 1.55;
        color: var(--bg-color-dark);
    }

    .auth-message-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.4rem;
    }

    .auth-btn-outline {
        display: inline-block;
        padding: 0.6rem 1.1rem;
        border-radius: 9px;
        border: 1px solid var(--tablegr-color);
        background-color: var(--color-white);
        color: var(--bg-color-dark);
        font-weight: 600;
        font-size: 0.88rem;
        text-decoration: none;
        cursor: pointer;
    }

    .auth-btn-outline:hover {
        border-color: var(--filter-color);
    }

    .validation-errors {
        list-style: none;
        margin: 0 0 1rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .validation-errors li {
        color: var(--error-color);
        font-size: 0.82rem;
    }

    .auth-alert-info {
        background-color: rgb(2 134 126 / 8%);
        border: 1px solid rgb(2 134 126 / 35%);
        color: var(--bg-color-dark);
        display: block;
    }

    .auth-alert-info p {
        margin: 0 0 0.4rem;
    }

    .auth-alert-info p:last-child {
        margin-bottom: 0;
    }

    label.auth-checkbox {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        color: var(--bg-color-dark);
        cursor: pointer;
        margin-bottom: 1rem;
    }





    .hidden {
        display: none;
    }

    .divflex {
        display: flex;
    }

    /*      #################       Menü oben     ##############            */

    .navbar-toggler {
        /*appearance: none;*/
        cursor: pointer;
        /*width: 3.5rem;*/
        height: 2.8rem;
        color: white;
        position: absolute;
        font-size: 2rem;
        right: 1rem;
        /*	border: 1px solid rgba(255, 255, 255, 0.1);*/
        background-color: var(--bg-color-dark);
    }

    .navkomplett {
        display: block;
        background-color: var(--bg-color-dark);
        padding-bottom: 0.5rem;
    }

    .mpnavdiv {
        margin-top: 1rem;
    }

    .mpnavdiv2 {
        display: none;
    }

    .mpnav-link {
        vertical-align: middle;
        color: white;
        font-size: large;
        text-decoration: none;
        padding-left: 0.5rem;
    }

    .footerclass {
        display: none;
    }

    .hometext {
        padding: 1rem;
    }



    .menuversteckt {
        display: none;
    }

    .menugezeigt {
        display: block;
        overflow: hidden;
    }



    .logo {
        background-color: var(--bg-color-dark);
    }

    .homeimg {
        margin: auto;
        display: flex;
        width: 100%;
    }

    .imgdiv {
        margin: auto;
    }
    /*      #################       footer     ##############            */

    .footerclass {
        display: none;
    }

    .about-shell {
        max-width: 760px;
        margin: 2rem auto;
        padding: 0 1rem 3rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .about-shell > h1 {
        text-align: center;
        color: var(--bg-color-dark);
        font-size: 1.6rem;
        font-weight: 700;
        margin: 0;
    }

    .about-card {
        background-color: var(--color-white);
        border-radius: 16px;
        padding: 2rem 1.5rem 2.5rem;
        box-shadow: 0 24px 60px -24px rgb(8 15 80 / 35%), 0 2px 8px rgb(8 15 80 / 8%);
    }

    .aboutReihe {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin: 0 0 1rem;
    }

    .links,
    .rechts {
        margin: 0;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .links {
        background-color: var(--second-color);
        color: var(--bg-color-dark);
    }

    .rechts {
        background-color: var(--bg-color-dark);
        color: var(--color-white);
    }

    .abouth1 {
        text-align: center;
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    /*      #################       Footer-Seiten (Impressum, Datenschutz, Kontakt)     ##############            */

    .legal-shell {
        max-width: 720px;
        margin: 2rem auto;
        padding: 0 1rem 3rem;
    }

    .legal-card {
        background-color: var(--color-white);
        border-radius: 16px;
        padding: 2rem 1.5rem 2.5rem;
        box-shadow: 0 24px 60px -24px rgb(8 15 80 / 35%), 0 2px 8px rgb(8 15 80 / 8%);
    }

    .legal-card h1 {
        color: var(--bg-color-dark);
        font-size: 1.6rem;
        font-weight: 700;
        margin: 0 0 1.2rem;
    }

    .legal-card h2 {
        color: var(--bg-color-dark);
        font-size: 1.15rem;
        font-weight: 700;
        margin: 1.6rem 0 0.6rem;
    }

    .legal-subhead {
        color: var(--bg-color-dark);
        font-size: 1.02rem;
        font-weight: 700;
        margin: 1.6rem 0 0.5rem;
    }

    .legal-card p {
        font-size: 0.92rem;
        line-height: 1.6;
        margin: 0 0 0.9rem;
        color: var(--bg-color-dark);
    }

    .legal-card ul {
        margin: 0 0 0.9rem;
        padding-left: 1.3rem;
    }

    .legal-card li {
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 0.3rem;
    }

    .legal-card a {
        color: var(--filter-color);
    }

    .legal-card small {
        color: var(--letter-blass);
    }

    .filtersidebar {
        display: none;
    }

    .vokListSidebar {
        display: none;
    }

    .exercMitte {
        background-color: var(--bg-color-light);
        padding: 0.5em
    }

    .mpp {
        font-size: 1em;
        line-height: 1.4rem;
    }

    .mppserif {
        font-family: 'Times New Roman';
        font-size: 1.2em;
        line-height: 1.4rem;
    }

    .mppblass {
        font-size: 1em;
        line-height: 1.4rem;
        color: var(--letter-blass);
    }

    .nomargin {
        margin: 0;
    }

    .mppcenter {
        width: 95%;
        text-align: center;
    }

    .btnheight2 {
        height: 2rem;
    }

    .btnheight3 {
        height: 3rem;
    }

    .color2 {
        background-color: var(--second-color)
    }

    .div_exerc_infoleiste {
        background-color: var(--bg-color-dark);
        color: var(--color-white);
        border-radius: 15px;
        padding: 1rem;
        text-align: center;
    }

    .exerctable_partinfo {
        width: 100%;
        margin-top: 0.7rem;
        background-color: var(--color-white);
        color: var(--bg-color-dark);
        border-radius: 15px;
        padding: 0.5rem;
    }

    .part_info_0 {
        font-size: 1rem;
        color: var(--letter-blass);
    }

    .part_info_1 {
        font-size: 1.1rem;
        padding-left: 1rem;
    }

    .divexerc_oben {
        display: block;
        margin-top: 0.7rem;
        padding: 1rem;
        background-color: var(--color-white);
        border-radius: 15px;
    }

    .divexerc_unten {
        display: block;
        margin-top: 0.7rem;
        padding: 1rem;
        background-color: var(--color-white);
        border-radius: 15px;
    }

    .exerc_textarea {
        margin-top: 0.7rem;
        width: 98%;
        min-height: 5rem;
        display: block;
        font-family: 'Times New Roman';
        font-size: 1.2em;
        line-height: 1.4rem;
        background-color: var(--second-color);
        color: var(--letter-blass);
        border: 1.5px solid var(--bg-color-light);
        border-radius: 15px;
    }

    .exerc_result {
        width: 95%;
        display: block;
        min-height: 2rem;
        font-size: 1.2em;
        line-height: 1.4rem;
        background-color: var(--second-color);
        color: var(--letter-blass);
        padding: 0.4rem;
        border: 1.5px solid var(--bg-color-light);
        border-radius: 15px;
    }
    /*        .exerc_textarea:focus {
            outline: none;
            border-color: var(--main-bg-color-hex);
            box-shadow: 0 0 0 3px var(--main-bg-color-focus-ring);
        }

        .exerc_textarea.richtig {
            border-color: var(--success-color);
            background-color: var(--success-bg);
        }

        .exerc_textarea.falsch {
            border-color: var(--error-color);
            background-color: var(--error-bg);
        }*/

    .mic_in_textarea {
        position: relative;
        left: 340px;
        top: -25px;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: var(--color-white);
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
        border: 1px solid var(--line);
        transition: transform .12s ease, color .12s ease, border-color .12s ease; /* */
    }



    .divexerc_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .divexerc_grid2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .exercgrid_btn_dark {
        grid-column: 1 / -1;
        background-color: var(--bg-color-dark);
        color: var(--color-white);
        border-radius: 15px;
    }

    .exercgrid_btn {
        background-color: var(--second-color);
        border-radius: 15px;
    }


    .exerc_btn {
        width: 48%;
        border-radius: 15px;
    }

    .divexerc_btn {
        padding: 0.6rem;
    }
}

@media only screen and (min-width: 800px ) {

    /*      #################       Kapitelwahl     ##############            */

    .grid-container {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
        gap: 1.6rem;
    }

    .kapitelliste {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        gap: 0.75rem;
    }

    .grid-item {
        border: 1px solid grey;
        padding: 0.75rem 0.9rem;
        background-color: white;
    }

    .grid-item:hover {
        border-color: var(--filter-color);
    }

    .grid-item-name {
        font-size: 1.15rem;
    }

    .zettelZentrum {
        padding: 1.5rem 1.75rem;
        font-size: large;
        top: 1.5rem;
    }

    .KapitelTitel {
        font-size: 2.2rem;
    }

    .ZettelTitel {
        margin-top: 0.9rem;
    }

    /*      #################       Verwaltungsseiten (Login etc)     ##############            */

    .auth-shell {
        flex-direction: row;
        min-height: 600px;
    }

    .auth-brand {
        width: 42%;
        padding: 2.2rem 2rem;
        display: flex;
        flex-direction: column;
    }

    .auth-brand h1 {
        font-size: 1.6rem;
        margin: 1.6rem 0 0.5rem;
    }

    .bubble-art {
        display: block;
        margin-top: auto;
        padding-top: 2rem;
    }

    .bubble-art svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .brand-foot {
        display: block;
        margin-top: 1.6rem;
        padding-top: 1.1rem;
        border-top: 1px solid rgb(255 255 255 / 14%);
        font-size: 0.78rem;
        color: rgb(255 255 255 / 55%);
    }

    .auth-panel {
        width: 58%;
        padding: 2.4rem 2.6rem;
    }

    .legal-card {
        padding: 2.5rem 3rem 3rem;
    }

    .about-card {
        padding: 2.5rem 3rem 3rem;
    }

    .aboutReihe {
        flex-direction: row;
    }

    .links,
    .rechts {
        flex: 1;
    }



    main {
        display: flex;
        background-color: var(--bg-color-light);
    }

    .hometext {
        margin: auto;
        width: 80%;
    }

    .footerclass {
        position: fixed;
        bottom: 0em;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        background-color: var(--bg-color-dark);
    }

    .navkomplett {
        display: flex;
    }

    .navbar-toggler {
        display: none;
    }

    .mpnavdiv {
        margin-top: 0;
    }

    .mpnav-link {
        margin-right: 2rem;
    }

    .menugezeigt, .menuversteckt {
        display: flex;
        background-color: var(--bg-color-dark);
        align-items: center;
        overflow: hidden;
    }

    /*#    #    Exercises             ####*/

    .exercMitte {
        display: block;
        height: 100vh;
        width: 60vw;
    }

    .vokListSidebar, .filtersidebar, .testSidebar {
        display: block;
        height: 100vh;
        width: 20vw;
        padding-top: 5rem;
        background-color: var( --bg-color-light);
    }

    .vokListSidebar {
        scroll-behavior: auto;
        overflow: scroll;
    }

    .allefilterbtn {
        padding: 1rem;
        display: grid;
        gap: 1rem;
    }

    .mpButtonaktiv {
        padding: 1rem;
    }

    .mpButton {
        padding: 1rem;
    }

    .divWortListe {
        background-color: var( --color-white);
        border-radius: 15px;
        padding: 1rem;
    }

    .WortListe {
        /*height: 30px;*/
        font-size: large;
        text-align: left;
        cursor: pointer;
        border: none;
    }

    .WortlisteSpan {
        margin-left: 0.5rem;
    }

    .WortListeaktiv {
        color: var(--orange-color)
    }
}