/*
###################################################################################
#  ACHTUNG: URHEBERRECHTSSCHUTZ / STRICT COPYRIGHT WARNING                        #
###################################################################################
#                                                                                 #
#  © 2026 ff. Copyright © Dom-Malbuch.de / ELBEHAI.de / H. v. Treffenfels         #
#  Alle Rechte ausdrücklich vorbehalten.                                          #
#                                                                                 #
#  Jede unbefugte Nutzung, Vervielfältigung, Spiegelung (Mirroring), Veränderung, #
#  Entfremdung oder Weitergabe dieses Quellcodes oder einzelner Bestandteile      #
#  (Quellcode, Skripte, Design-Elemente, Texte, Formulierungen, Templates,        #
#  Grafiken, Bilder, Dateien usw.) sowie kompletter Webseiten ist ausdrücklich    #
#  verboten!                                                                      #
#                                                                                 #
#  Das Entfernen oder Verändern dieses Copyright- bzw. Urheberrechtsvermerks      #
#  kann rechtliche Konsequenzen nach sich ziehen.                                 #
#                                                                                 #
#  Verstöße gegen das Urheberrechtsgesetz (UrhG) sowie gegen geltendes            #
#  internationales Urheberrecht werden konsequent zivil- und strafrechtlich       #
#  verfolgt.                                                                      #
#                                                                                 #
#  Digitale Begleitplattform zum Magdeburger Dom-Malbuch.                         #
#  Bestandteil eines Projektes von ELBEHAI.de.                                    #
#                                                                                 #
###################################################################################
#                                                                                 #
#  ATTENTION: STRICT COPYRIGHT WARNING                                            #
#                                                                                 #
#  © 2026 ff. Copyright © Dom-Malbuch.de / ELBEHAI.de / H. v. Treffenfels         #
#  All rights expressly reserved.                                                 #
#                                                                                 #
#  Any unauthorized use, reproduction, mirroring, modification, misuse or         #
#  distribution of this source code or any part thereof (including source code,   #
#  scripts, design elements, texts, wording, templates, graphics, images,         #
#  files, etc.), as well as complete web pages, is strictly prohibited.           #
#                                                                                 #
#  Removing or modifying this copyright notice may result in legal action.        #
#                                                                                 #
#  Violations of German copyright law and applicable international copyright      #
#  regulations will be prosecuted to the fullest extent permitted by law.         #
#                                                                                 #
#  Digital Companion Platform for the Magdeburg Cathedral Coloring Book.          #
#  Part of a project by ELBEHAI.de.                                               #
#                                                                                 #
###################################################################################
*/

/*----------------------------------------------------------
  Sprachbuttons
----------------------------------------------------------*/

.language-bar{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin:15px 0;

}

.language-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:74px;

    min-height:44px;

    padding:8px 12px;

    border:2px solid var(--dom-blue);

    border-radius:10px;

    background:#ffffff;

    color:var(--dom-blue);

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .25s,
        color .25s,
        transform .20s;

}

.language-button img{

    width:28px;

    height:20px;

    display:block;

    object-fit:cover;

    border:1px solid #333;

    border-radius:3px;

    background:#fff;

    box-sizing:border-box;

}


.language-button span{

    display:inline-block;

}

.language-button:hover{

    background:var(--dom-blue-light);

    transform:translateY(-2px);

}

.language-button.active-language{

    background:var(--dom-blue);

    color:#ffffff;

}

.language-button svg{

    width:22px;

    height:16px;

    border-radius:2px;

    flex-shrink:0;

}

/* ==========================================================
   flags.css
   Version 1.0
   Teil 2 von 4
   ========================================================== */

/*----------------------------------------------------------
  Flaggenfarben
----------------------------------------------------------*/

.flag{

    display:inline-flex;

    width:22px;

    height:16px;

    overflow:hidden;

    border-radius:2px;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.15);

}

.flag svg{

    width:100%;

    height:100%;

    display:block;

}

/*----------------------------------------------------------
  Kleine Animation
----------------------------------------------------------*/

.language-button:hover .flag{

    transform:scale(1.08);

    transition:transform .20s;

}

.language-button.active-language .flag{

    box-shadow:
        0 0 0 1px rgba(255,255,255,.65);

}

/*----------------------------------------------------------
  Smartphone
----------------------------------------------------------*/

@media (max-width:700px){

    .language-bar{

        gap:8px;

    }

    .language-button{

        min-width:66px;

        min-height:40px;

        padding:7px 10px;

        font-size:14px;

    }

    .flag{

        width:20px;

        height:14px;

    }

}

/* ==========================================================
   flags.css
   Version 1.0
   Teil 3 von 4
   ========================================================== */

/*----------------------------------------------------------
  Desktop (große Bildschirme)
----------------------------------------------------------*/

@media (min-width:1200px){

    .language-bar{

        gap:12px;

    }

    .language-button{

        min-width:82px;

        min-height:48px;

        font-size:16px;

        padding:10px 14px;

    }

    .flag{

        width:24px;

        height:18px;

    }

}

/*----------------------------------------------------------
  Tastaturbedienung
----------------------------------------------------------*/

.language-button:focus{

    outline:none;

}

.language-button:focus-visible{

    outline:3px solid #4ea3ff;

    outline-offset:3px;

}

/*----------------------------------------------------------
  Barrierefreiheit
----------------------------------------------------------*/

.language-button[aria-current="true"]{

    background:var(--dom-blue);

    color:#ffffff;

}

/* ==========================================================
   flags.css
   Version 1.0
   Teil 4 von 4
   ========================================================== */

/*----------------------------------------------------------
  Druckansicht
----------------------------------------------------------*/

@media print{

    .language-bar{

        display:none !important;

    }

}

/*----------------------------------------------------------
  Reduzierte Animationen
----------------------------------------------------------*/

@media (prefers-reduced-motion:reduce){

    .language-button,
    .language-button:hover,
    .flag,
    .language-button:hover .flag{

        transition:none !important;

        transform:none !important;

    }

}

/*----------------------------------------------------------
  Hilfsklassen
----------------------------------------------------------*/

.flag-text{

    white-space:nowrap;

    line-height:1;

}

/*----------------------------------------------------------
  Ende der flags.css
----------------------------------------------------------*/