/*
###################################################################################
#  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.                                               #
#                                                                                 #
###################################################################################
*/

/* ==========================================================
   Lokale Schriftart
   ========================================================== */

@font-face{

    font-family:"Didact Gothic";

    src:url("DidactGothic-Regular.ttf") format("truetype");

    font-weight:400;

    font-style:normal;

    font-display:swap;

}

:root{

    --dom-blue:#084b8a;

    --dom-blue-dark:#084b8a;

    --dom-blue-light:#eaf4ff;

    --dom-blue-accent:#6fb3ff;

    --dom-border:#d8d8d8;

    --dom-text:#222;

    --dom-bg:#F9F7F2;

    --dom-white:#ffffff;

    --radius:16px;

    --shadow:
        0 8px 25px rgba(0,0,0,.08);

    --layout-token-190769412228: 0;

    --cfg190769412228-version:1;

}

/* ==========================================
   Dark Mode
   ========================================== */

body[data-theme="dark"]{

    --dom-bg:#16181c;

    --dom-white:#23262b;

    --dom-text:#f2f2f2;

    --dom-border:#3a3d43;

    --dom-blue-light:#2b3d53;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

/* ==========================================
   WCAG – Bewegungen reduzieren
   ========================================== */

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

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none !important;

        transition:none !important;

    }

}

body{

    font-family:
    "Didact Gothic",
    Arial,
    Helvetica,
    sans-serif;

    color:var(--dom-text);

    background:
        linear-gradient(
            rgba(195,199,203,0.45),
            rgba(195,199,203,0.45)
        ),
        url("img/elbe.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    line-height:1.7;

}

button,
select,
input,
textarea{

    font-family:inherit;

    letter-spacing:0.02em;

}

img{

    display:block;

    max-width:100%;

    height:auto;

    border-radius:12px;

}

a{

    color:var(--dom-blue);

    text-decoration:none;

    overflow-wrap:anywhere;

    word-break:break-word;

}

a:hover,
a:focus-visible{

    text-decoration:underline;

}

main{

    width:min(1200px,94%);

    margin:178px auto 0;

    padding:0 0 60px;

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 2 von 8
   ========================================================== */

header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    width:100%;

    margin:0;
    padding:0;

    z-index:9999;

    background:
    linear-gradient(
        rgba(255,255,255,0.78),
        rgba(255,255,255,0.78)
    ),
    url("img/header_footer.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    box-shadow:0 2px 12px rgba(0,0,0,.08);

    padding-top:24px;
    padding-bottom:18px;

    border-bottom:1px solid var(--dom-blue);

}

.language-bar{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

}

.language-button{

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

    background:#fff;

    color:var(--dom-blue);

    padding:10px 18px;

    border-radius:10px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.language-button:hover,
.language-button:focus-visible{

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

}

.active-language{

    background:var(--dom-blue);

    color:#fff;

}

.card{

    background:#fff;

    margin:22px 0;

    padding:30px;

    border-radius:var(--radius);

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

    box-shadow:var(--shadow);

}

.card h2{

    margin-bottom:18px;

    color:var(--dom-blue);

    overflow-wrap:break-word;

    word-break:normal;

    hyphens:auto;

}

.card p{

    margin:0 15px 16px;

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 3 von 8
   ========================================================== */

.audio-card{

    background:#ffffff;

    margin:30px 0;

    padding:35px;

    border-radius:16px;

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

    box-shadow:var(--shadow);

}

.audio-card h2{

    color:var(--dom-blue);

    margin-bottom:15px;

}

.audio-info{

    margin-bottom:25px;

}

.audio-duration{

    font-weight:bold;

    color:#555;

    margin-bottom:25px;

}

.audio-button{

    width:100%;

    padding:18px;

    font-size:20px;

    font-weight:bold;

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

    border-radius:14px;

    cursor:pointer;

    background:var(--dom-blue);

    color:#ffffff;

    transition:.25s;

}

.audio-button:hover,
.audio-button:focus-visible{

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

}

.audio-button.playing{

    background:#d64545;

    border-color:#ff8d8d;

}

.rate-box{

    margin-top:35px;

}

.rate-title{

    text-align:center;

    font-weight:bold;

    margin-bottom:18px;

}

.rate-buttons{

    display:flex;

    gap:15px;

}

.rate-button{

    flex:1;

    padding:15px;

    font-size:18px;

    font-weight:bold;

    border-radius:12px;

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

    background:#ffffff;

    color:var(--dom-blue);

    cursor:pointer;

    transition:.25s;

}

.rate-button:hover,
.rate-button:focus-visible{

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

}

.active-rate:hover,
.active-rate:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

}

.active-rate{

    background:var(--dom-blue);

    color:#ffffff;

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 4 von 8
   ========================================================== */

.audio-note{

    margin-top:30px;

    padding:18px 20px;

    background:#f8fbff;

    border-left:5px solid var(--dom-blue);

    border-radius:10px;

}

.headphone-note{

    font-size:0.95rem;

    margin-bottom:12px;

    color:#444;

}

.volume-note{

    font-size:0.95rem;

    color:#444;

}

.source-note{

    font-size:0.90rem;

    color:#666;

}

.source-note h2{

    font-size:1.10rem;

    margin-bottom:12px;

}

.source-note p{

    line-height:1.6;

}

.navigation{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin:24px 0 8px 0;

}

.nav-button{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:60px;

    padding:15px 20px;

    background:var(--dom-blue);

    color:#ffffff;

    font-size:18px;

    font-weight:bold;

    border-radius:14px;

    text-decoration:none;

    transition:.25s;

    box-shadow:var(--shadow);

}

.nav-button:hover,
.nav-button:focus-visible{

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

    text-decoration:none;

}

.nav-left{

    text-align:left;

}

.nav-right{

    text-align:right;

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 5 von 8
   ========================================================== */

/*----------------------------------------------------------
  Schwebender "Nach oben"-Button
----------------------------------------------------------*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:58px;

    height:58px;

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

    border-radius:50%;

    background:#b9dcff;

    color:#0b3d75;

    font-size:28px;

    font-weight:800;

    cursor:pointer;

    box-shadow:0 8px 22px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .30s,
        transform .30s,
        background .20s,
        color .20s,
        border-color .20s,
        box-shadow .20s;

    z-index:9999;

}

.back-to-top:hover,
.back-to-top:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:
        0 0 10px rgba(111,179,255,.30),
        0 8px 22px rgba(0,0,0,.25);

    transform:translateY(0) scale(1.08);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*----------------------------------------------------------
  Schwebender Datenschutz-Button
  – spiegelbildlich zum "Nach oben"-Button
----------------------------------------------------------*/

.privacy-reopen-button{

    position:fixed;

    left:25px;

    bottom:25px;

    width:58px;

    height:58px;

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

    border-radius:50%;

    background:#b9dcff;

    color:#0b3d75;

    cursor:pointer;

    box-shadow:0 8px 22px rgba(0,0,0,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    line-height:1;

    transition:
        transform .20s,
        background .20s,
        color .20s,
        border-color .20s,
        box-shadow .20s;

    z-index:10001;

}

.privacy-reopen-button:hover,
.privacy-reopen-button:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:
        0 0 10px rgba(111,179,255,.30),
        0 8px 22px rgba(0,0,0,.25);

    transform:scale(1.08);

}

.privacy-reopen-button .privacy-fingerprint-icon{

    width:30px;

    height:30px;

    display:block;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

    pointer-events:none;

}


/*----------------------------------------------------------
  Footer
----------------------------------------------------------*/

footer{

    margin-top:20px;

    padding:35px 20px;

    background:
    linear-gradient(
        rgba(255,255,255,0.78),
        rgba(255,255,255,0.78)
    ),
    url("img/header_footer.jpg");

    background-size:cover;
    background-position:top;
    background-repeat:no-repeat;

    border-top:1px solid var(--dom-blue);

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

    text-align:center;

    font-size:.95rem;

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

}

footer a{

    font-weight:bold;

}

footer a:hover{

    color:var(--dom-blue);

    text-decoration:underline;

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 6 von 8
   ========================================================== */

/*----------------------------------------------------------
  Bilder
----------------------------------------------------------*/

.card img{

    display:block;

    width:100%;

    max-width:900px;

    margin:25px auto 0;

    border-radius:14px;

    border:1px solid #dddddd;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

/*----------------------------------------------------------
  Tabellen
----------------------------------------------------------*/

table{

    width:100%;

    border-collapse:collapse;

    margin:25px 0;

}

table th{

    background:var(--dom-blue);

    color:#ffffff;

    padding:12px;

}

table td{

    padding:12px;

    border:1px solid #dddddd;

}

/*----------------------------------------------------------
  Listen
----------------------------------------------------------*/

ul,
ol{

    margin:15px 0 20px 28px;

}

li{

    margin-bottom:10px;

}

/*----------------------------------------------------------
  Zitate
----------------------------------------------------------*/

blockquote{

    margin:20px 0;

    padding:18px 22px;

    border-left:5px solid var(--dom-blue);

    background:#f8fbff;

    font-style:italic;

    border-radius:10px;

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 7 von 8
   ========================================================== */

/*----------------------------------------------------------
  Responsive Darstellung
----------------------------------------------------------*/

@media (max-width:900px){

    main{

        width:96%;

    }

    header h1{

        font-size:1.7rem;

    }

    .card{

        padding:22px;

    }

    .audio-card{

        padding:25px;

    }

    .audio-button{

        font-size:18px;

        padding:16px;

    }

    .rate-buttons{

        flex-direction:column;

    }

    .rate-button{

        width:100%;

        font-size:18px;

    }

    .navigation{

    flex-direction:row;

    justify-content:center;

    gap:8px;

}

    .nav-button{

    flex:0.9;

    min-height:48px;

    padding:10px 8px;

    font-size:0.9rem;

    border-radius:10px;
}

.navigation a:nth-child(2){

    flex:0.7;
}

}

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

@media (max-width:600px){

    body{

        font-size:16px;

    }

    header{

        padding:20px 15px;

    }

    header h1{

        font-size:1.45rem;

    }

    .language-bar{

        gap:6px;

    }

    .language-button{

        min-width:52px;

        padding:8px 10px;

        font-size:14px;

    }

    .audio-button{

        font-size:17px;

    }

    .rate-button{

        font-size:17px;

        padding:14px;

    }

    .back-to-top{

    width:60px;

    height:60px;

    right:18px;

    bottom:18px;

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

    border-radius:50%;

    background:#b9dcff;

    color:#0b3d75;

    font-size:30px;

    font-weight:800;

}

    .privacy-reopen-button{

        width:60px;

        height:60px;

        left:18px;

        bottom:18px;

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

        border-radius:50%;

        background:#b9dcff;

        color:#0b3d75;

    }

    .privacy-reopen-button .privacy-fingerprint-icon{

        width:31px;

        height:31px;

    }


    header{

    padding:14px 18px;

}

header h1{

    font-size:2.2rem;

    margin-bottom:20px;

}

.header-controls{

    gap:18px;

}

.header-group{

    margin-bottom:0;

}

}

/* ==========================================================
   style.css
   Version 2.1
   Teil 8 von 8
   ========================================================== */

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

@media print{

    body{

        background:#ffffff;

        color:#000000;

    }

    header,
    footer,
    .language-bar,
    .audio-card,
    .navigation,
    .back-to-top,
    .privacy-reopen-button{

        display:none !important;

    }

    main{

        width:100%;

        margin:0;

        padding:0;

    }

    .card{

        box-shadow:none;

        border:none;

        margin:0 0 20px 0;

        padding:0;

    }

    a{

        color:#000000;

        text-decoration:none;

    }

    img{

        max-width:100%;

        page-break-inside:avoid;

    }

}

/*----------------------------------------------------------
  Kleiner Helfer
----------------------------------------------------------*/

.hidden{

    display:none !important;

}

/* ==========================================
   WCAG – Sichtbarer Tastaturfokus
   ========================================== */

button:focus-visible,
a:focus-visible,
select:focus-visible,
.station-image:focus-visible{

    outline:3px solid #ffbf00;

    outline-offset:3px;

}

/*----------------------------------------------------------
  Ende der style.css
----------------------------------------------------------*/

.header-top{

display:flex;

justify-content:center;

align-items:center;

gap:24px;

flex-wrap:wrap;

margin-bottom:18px;

}

.start-button-container{

text-align:center;

margin-top:15px;

margin-bottom:20px;

}

.start-button{

display:inline-block;

padding:12px 34px;

background:#b9dcff;

color:#0b3d75;

font-weight:bold;

border:2px solid #6eaef0;

border-radius:12px;

text-decoration:none;

transition:
    background .25s,
    color .25s,
    border-color .25s;

}

body[data-theme="dark"] .start-button,
body[data-theme="dark"] .card a.start-button{

    background:var(--dom-blue);

    color:#ffffff !important;

    border-color:var(--dom-blue-accent);

    text-decoration:none;

}

body[data-theme="dark"] .start-button:hover,
body[data-theme="dark"] .start-button:focus-visible,
body[data-theme="dark"] .card a.start-button:hover,
body[data-theme="dark"] .card a.start-button:focus-visible{

    background:#3d5572;

    color:#ffffff !important;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

    text-decoration:none;

}

.start-button:hover{

background:#8ec5ff;

}

.theme-switch{

position:relative;

display:inline-block;

width:62px;

height:34px;

}

.theme-switch input{

display:none;

}

.slider{

position:absolute;

cursor:pointer;

top:0;

left:0;

right:0;

bottom:0;

background:#cccccc;

border-radius:34px;

transition:.3s;

}

.slider:before{

position:absolute;

content:"";

height:26px;

width:26px;

left:4px;

bottom:4px;

background:white;

border-radius:50%;

transition:.3s;

}

input:checked + .slider{

background:#1f4e79;

}

input:checked + .slider:before{

transform:translateX(28px);

}

.theme-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

}

.theme-switch-row{

    display:flex;

    align-items:center;

    gap:10px;

}

.theme-icon{

    width:22px;

    height:22px;

}

.theme-label{

    margin-top:10px;

    font-size:12px;

    color:#666666;

    text-align:center;

}

.station-image{

    display:block;

    width:85%;

    max-width:420px;

    height:auto;

    margin:20px auto;

    border-radius:12px;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

    transition:transform .25s;

}

.station-image:hover{

    transform:scale(1.02);

}

#lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    z-index:99999;

    justify-content:center;

    align-items:center;

}

#lightbox img{

    max-width:95%;

    max-height:95%;

    border-radius:10px;

}

#lightbox button{

    position:absolute;

    top:20px;

    right:30px;

    width:56px;

    height:56px;

    border:none;

    background:transparent;

    color:#ffffff;

    font-size:48px;

    line-height:1;

    cursor:pointer;

}

.placeholder-image{

    display:block;

    width:100%;

    max-width:520px;

    margin:20px auto;

    border-radius:10px;

    border:1px solid #d5d5d5;

    cursor:pointer;

    transition:transform .25s ease;

}

.placeholder-image:hover{

    transform:scale(1.03);

}

/* ==========================================
   Motiv-Vorschau (nicht anklickbar)
   ========================================== */

.motif-preview{

    display:block;

    width:100%;

    max-width:720px;

    margin:0 auto;

    border-radius:12px;

    border:1px solid #d7d7d7;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

}

.motif-frame{

    max-width:720px;

    margin:12px auto 0;

    overflow:hidden;

    border-radius:12px;

}

/* ==========================================
   Header-Karte
   ========================================== */

.header-card{

    background:#ffffff;

    width:100%;

    max-width:none;

    margin:0;

    padding:20px;

    border-radius:0;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

/* ==========================================
   Motivtitel
   ========================================== */

#motif-title{

    text-align:center;

    color:var(--dom-blue);

    font-size:2rem;

    font-weight:700;

    margin:0 0 18px 0;

    line-height:1.2;

}

/* ==========================================
   Header-Steuerleiste
   ========================================== */

.header-controls{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:80px;

    margin:20px auto 10px;

    width:fit-content;

}

.page-header-controls{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:80px;

    margin:12px auto 0;

    width:fit-content;

}

.header-control{

    width:220px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.header-control label,
.header-control p,
#themeLabel{

    color:var(--dom-blue);

    font-weight:700;

    margin-bottom:12px;

    text-align:center;

}

.header-control select{

    width:220px;

    max-width:100%;

    height:46px;

    padding:8px 12px;

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

    border-radius:10px;

    font-size:16px;

    font-weight:530;

}

.header-control select{

    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease;

}

.header-control select:hover{

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

    border-color:var(--dom-blue);

}

.font-size-buttons{

    display:flex;

    gap:10px;

}

.font-size-buttons button{

    min-width:34px;

    padding:8px 12px;

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

    border-radius:8px;

    background:#ffffff;

    color:var(--dom-blue);

    font-weight:700;

    cursor:pointer;

    height:42px;

}

.font-size-buttons button:hover,
.font-size-buttons button:focus-visible{

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

}

html{

    font-size:100%;

}

body{

    font-size:1rem;

}

.card,
.audio-card,
.source-note,
.audio-info,
.audio-duration,
.rate-title,
.headphone-note,
.volume-note,
.nav-button,
footer{

    font-size:1rem;

}

/* ==========================================
   Hell-/Dunkelmodus
   ========================================== */

.theme-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin-top:0;

}

.theme-button{

    width:42px;

    height:42px;

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

    border-radius:8px;

    background:#ffffff;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0;

    transition:.25s;

}

.theme-button{

    font-size:29px;

    line-height:1;

    font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;

    padding-bottom:0;

    display:flex;

    justify-content:center;

    align-items:center;


}


.theme-button.active{

    background:var(--dom-blue);

}

.theme-button:hover,
.theme-button:focus-visible{

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

}

.theme-button.active img{

    filter:brightness(0) invert(1);

}

.theme-toggle-button{

    width:180px;

    height:42px;

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

    border-radius:8px;

    background:#ffffff;

    color:var(--dom-blue);

    font-family:inherit;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.theme-toggle-button:hover,
.theme-toggle-button:focus-visible{

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

}

body[data-theme="dark"] .theme-toggle-button{

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

    color:#6fb3ff;

}

/* ==========================================
   Responsive Header
   ========================================== */

@media (max-width:700px){

    .header-controls{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:12px;

    transform:translateX(-5px);

    padding:0 10px;

    margin:10px 0 0;

    width:100%;

}

/* ==========================================
   Smartphone – Bedienelemente im Dunkelmodus
   ========================================== */

body[data-theme="dark"] #languageSelect,
body[data-theme="dark"] .theme-toggle-button,
body[data-theme="dark"] .font-size-buttons button,
body[data-theme="dark"] .rate-button{

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

    color:var(--dom-blue-accent);

    border-color:var(--dom-blue);

}

body[data-theme="dark"] .active-rate{

    background:var(--dom-blue);

    color:#ffffff;

    border-color:var(--dom-blue-accent);

}

body[data-theme="dark"] .active-rate:hover,
body[data-theme="dark"] .active-rate:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

}

.page-header-controls{

    gap:22px;

}

.page-header-controls{

    position:relative;

    left:7px;

}

    .header-control{

    width:auto;

    min-width:0;

}

.header-control:nth-child(1){

    margin-right:18px;

}

.header-control:nth-child(2){

    margin-left:8px;

    margin-right:35px;

}

    .header-control select{

    width:46px;

    min-width:46px;

    height:36px;

    font-size:12px;

    text-align:left;

    padding:0 2px 0 4px;

}

    .theme-button{

    width:34px;

    height:36px;

    padding:0;

    line-height:0.9;

}

.theme-toggle-button{

    width:155px;

    font-size:1.03rem;

    line-height:1.1;

}

html.font-large .theme-toggle-button{

    font-size:18px;

}

    .theme-button img{

    width:18px;

    height:18px;

}

    .font-size-buttons{

    display:flex;

    gap:5px;

    justify-content:center;

}

    .font-size-buttons button{

    width:32px;

    min-width:32px;

    height:37px;

    padding:0;

    font-size:1rem;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    line-height:1;

}

    .header-control label,
    .header-control p,
    #themeLabel{

    font-size:0.82rem;

    margin-bottom:6px;

}

    #motif-title{

    font-size:1.35rem;

    line-height:1.15;

    margin-bottom:12px;

}

main{

    margin-top:165px;

}

.nav-left,
.nav-right{

    text-align:center;

}

footer{

    font-size:0.85rem;

}

}

/* ==========================================
   Dark Mode – Karten
   ========================================== */

/* ==========================================
   Dark Mode – Seitenhintergrund
   ========================================== */

body[data-theme="dark"]{

    background:#16181c;

}

body[data-theme="dark"] .header-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .audio-card,
body[data-theme="dark"] header,
body[data-theme="dark"] footer{

    background:var(--dom-white);

    color:var(--dom-text);

}

body[data-theme="dark"] header{

    border-bottom:1px solid var(--dom-blue);

}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3{

    color:#6fb3ff;

}

body[data-theme="dark"] #motif-title{

    color:#6fb3ff;

}

body[data-theme="dark"] p{

    color:var(--dom-text);

}

body[data-theme="dark"] .card a{

    color:#6fb3ff;

}

body[data-theme="dark"] .card a:hover,
body[data-theme="dark"] .card a:focus-visible{

    color:#9fd0ff;

    text-decoration:underline;

}

body[data-theme="dark"] .header-control label,
body[data-theme="dark"] .header-control p,
body[data-theme="dark"] #themeLabel{
    color:#6fb3ff;

}

body[data-theme="dark"] footer a{

    color:#6fb3ff;

}

body[data-theme="dark"] footer a:hover{

    color:#9fd0ff;

    text-decoration:underline;

}

body[data-theme="dark"] .nav-button{

    background:var(--dom-blue);

    color:#ffffff;

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

}

body[data-theme="dark"] .font-size-buttons button{

    color:var(--dom-blue-accent);

}

body[data-theme="dark"] .font-size-buttons button:focus-visible{

    background:var(--dom-blue);

    color:#ffffff;

}

/* ==========================================
   Dark Mode – einheitliche Button-Hierarchie
   Primäre Aktionen: kräftiges Blau + Weiß
   Sekundäre Bedienelemente: dunkle Fläche + Akzentblau
   ========================================== */

body[data-theme="dark"] .audio-button{

    background:var(--dom-blue);

    color:#ffffff;

    border-color:var(--dom-blue-accent);

}

body[data-theme="dark"] .audio-button:hover,
body[data-theme="dark"] .audio-button:focus-visible,
body[data-theme="dark"] .nav-button:hover,
body[data-theme="dark"] .nav-button:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

}

body[data-theme="dark"] .back-to-top,
body[data-theme="dark"] .privacy-reopen-button{

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

    color:var(--dom-blue-accent);

    border-color:var(--dom-blue);

}

/* ==========================================
   Dark Mode – Bilder
   ========================================== */

body[data-theme="dark"] img{

    filter:brightness(75%);

    transition:filter .25s;

}

body[data-theme="dark"] .headphone-note,
body[data-theme="dark"] .volume-note{

    background:transparent;

    color:#f2f2f2;

}

body[data-theme="dark"] .audio-note{

    background:#2b2f34;

    border-left:5px solid var(--dom-blue);

}

/* ==========================================
   Dropdown per Maus ohne Fokusrahmen
   ========================================== */

.mouse-focus #languageSelect:focus{

    outline:none;

    box-shadow:none;

}

/* ==========================================
   Logos im Impressum
   ========================================== */

.logo-gallery{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin:30px auto;

}

.logo-genehmigungen{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:nowrap;

    width:100%;

    gap:0;

    padding:0 18px;

}

@media (max-width:700px){

    .logo-genehmigungen{

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

        padding:0;

    }

}

.logo-genehmigungen img{

    width:auto;

    height:90px;

}

.logo-genehmigungen img{

        height:65px !important;

    }

.logo-genehmigungen .logo-domgemeinde{

    height:90px;

}

.logo-genehmigungen .logo-kultur{

    height:90px;

}

.logo-genehmigungen .logo-stadtarchiv{

    height:90px;

}

.logo-genehmigungen .logo-land{

    height:90px;

}

.logo-gallery img{

    width:auto;

    max-width:100%;

    max-height:none;

    height:auto;

    margin:0;

    border:none;

    border-radius:0;

    box-shadow:none;

    background:transparent;

}

.logo-gallery img.logo-otto{

    width:auto;

    height:300px;

}

.logo-domgemeinde{

    max-width:180px;

}

.logo-kultur{

    max-width:300px;

}

.logo-stadtarchiv{

    max-width:260px;

}

.logo-land{

    max-width:320px;

}

.logo-otto{

    width:auto;

    height:170px;

}



.logo-allesretter{

    width:auto;

    height:170px;

}

.reading-duration{

    font-weight:bold;

    color:#555;

    margin:16px 0 32px;

}

body[data-theme="dark"] .reading-duration{

    color:#f2f2f2;

}

/* ==========================================
   Stationsauswahl
   ========================================== */

.station-select-container{

    max-width:520px;

    margin:30px auto 0;

}

.station-select-label{

    display:block;

    margin-bottom:12px;

    font-weight:700;

    color:var(--dom-blue);

    text-align:center;

}

.station-select{

    width:100%;

    height:52px;

    padding:0 16px;

    font-family:inherit;

    font-size:1rem;

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

    border-radius:10px;

    background:#ffffff;

    color:var(--dom-text);

    cursor:pointer;

    transition:
        background-color .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;

}

.station-select:hover,
.station-select:focus-visible{

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

    border-color:var(--dom-blue);

}

body[data-theme="dark"] .station-select{

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

    color:var(--dom-blue-accent);

    border-color:var(--dom-blue);

}

body[data-theme="dark"] .station-select:hover,
body[data-theme="dark"] .station-select:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

}

/* =========================================
   Copyright-Popup
========================================= */

#copyright-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    z-index:999999;

}

#copyright-popup{

    width:min(520px,95vw);

    max-height:90vh;

    overflow-y:auto;

    background:#ffffff;

    border-radius:12px;

    padding:28px;

    box-sizing:border-box;

    box-shadow:0 10px 40px rgba(0,0,0,.35);

    text-align:center;

    font-family:"Didact Gothic",Arial,Helvetica,sans-serif;

    font-size:1rem;

    color:#333333;

}

#copyright-popup h2{

    font-family:inherit;

    font-size:1.5rem;

    margin-top:0;

    color:#003366;

}

#copyright-popup p{

    font-family:inherit;

    font-size:0.90rem;

    line-height:1.6;

    margin:16px 0;

    color:inherit;

}

#copyright-ok{

    font-family:inherit;

    font-size:1rem;

    margin-top:14px;

    padding:12px 28px;

    border:none;

    border-radius:8px;

    background:#005ea8;

    color:#ffffff;

    cursor:pointer;

    transition:background .2s ease;

}

#copyright-ok:hover{

    background:#004987;

}

#copyright-ok:focus-visible{

    outline:3px solid #ffcc00;

    outline-offset:3px;

}

/* ==========================================
   Desktop – Bedienelemente im Dunkelmodus
   ========================================== */

@media (min-width:701px){

body[data-theme="dark"] #languageSelect,
body[data-theme="dark"] .theme-toggle-button,
body[data-theme="dark"] .font-size-buttons button,
body[data-theme="dark"] .rate-button{

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

    color:var(--dom-blue-accent);

    border-color:var(--dom-blue);

}

body[data-theme="dark"] .active-rate{

    background:var(--dom-blue);

    color:#ffffff;

    border-color:var(--dom-blue-accent);

}

body[data-theme="dark"] .active-rate:hover,
body[data-theme="dark"] .active-rate:focus-visible{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

}

body[data-theme="dark"] #languageSelect:hover,
body[data-theme="dark"] .theme-toggle-button:hover,
body[data-theme="dark"] .font-size-buttons button:hover,
body[data-theme="dark"] .rate-button:hover,
body[data-theme="dark"] .nav-button:hover{

    background:#3d5572;

    color:#ffffff;

    border-color:var(--dom-blue-accent);

    box-shadow:0 0 10px rgba(111,179,255,.30);

    transition:
        background .20s,
        color .20s,
        border-color .20s,
        box-shadow .20s;

}

}

/* ==========================================
   WCAG – Textmarkierung
   ========================================== */

::selection{

    background:#ffeb80;

    color:#000000;

}

::-moz-selection{

    background:#ffeb80;

    color:#000000;

}

/* ==========================================
   TTS – Vorlesen-Highlighting (nur einzelnes Wort)
   Version 2.4
   ========================================== */

.tts-word-highlight,
mark.tts-word-highlight{
    background: #ffeb3b !important;
    color: #000000 !important;
    padding: 1px 4px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

body[data-theme="dark"] .tts-word-highlight,
body[data-theme="dark"] mark.tts-word-highlight{
    background: #fbc02d !important;
    color: #000000 !important;
}

/* ==========================================
   Ende TTS-Highlighting
   ========================================== */

/* ==========================================
   Arabisch – Schreibrichtung rechts nach links
   ========================================== */

html[dir="rtl"] body{

    direction:rtl;

}

html[dir="rtl"] ul,
html[dir="rtl"] ol{

    margin-left:0;
    margin-right:28px;

}

html[dir="rtl"] blockquote,
html[dir="rtl"] .audio-note{

    border-left:0;
    border-right:5px solid var(--dom-blue);

}

html[dir="rtl"] body[data-theme="dark"] .audio-note{

    border-left:0;
    border-right:5px solid var(--dom-blue);

}

html[dir="rtl"] .language-item span{

    text-align:right;

}

/* ==========================================
   Ende Arabisch – Schreibrichtung
   ========================================== */

/* ==========================================
   Arabisch – Smartphone-Header spiegeln
   Nur die Abstände der drei Header-Bedienelemente.
   Alle übrigen RTL-Regeln bleiben unverändert.
   ========================================== */

@media (max-width:700px){

    html[dir="rtl"] .header-controls{
        transform:translateX(5px);
    }

    html[dir="rtl"] .header-control:nth-child(1){
        margin-right:0;
        margin-left:18px;
    }

    html[dir="rtl"] .header-control:nth-child(2){
        margin-left:35px;
        margin-right:8px;
    }

}

/* ==========================================
   Ende Arabisch – Smartphone-Header
   ========================================== */

/* ==========================================
   Desktop – Abstand unter dem festen Header
   ========================================== */

@media (min-width:701px){

    main{
        margin-top:214px;
    }

}

/* ==========================================
   Smartphone/Tablet – stabiler, scharfer Hintergrund
   Eigene feste Hintergrundebene für mobile Browserleisten.
   ========================================== */

@media (max-width:700px){

    html{
        background-color:#c3c7cb;
        min-height:100%;
    }

    body{
        background:none;
        min-height:100%;
        position:relative;
        isolation:isolate;
    }

    body::before{
        content:"";
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        height:100lvh;
        background:
            linear-gradient(
                rgba(195,199,203,0.45),
                rgba(195,199,203,0.45)
            ),
            url("img/elbe.jpg");
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        pointer-events:none;
        z-index:-1;
        transform:translateZ(0);
    }

    body[data-theme="dark"]::before{
        background:#16181c;
    }

}

/* ==========================================
   Ende Desktop-Abstand / mobiler Hintergrund
   ========================================== */

/* ==========================================
   Smartphone/Tablet – Abstand zur ersten Karte
   leicht reduziert
   ========================================== */

@media (max-width:700px){

    main{
        margin-top:165px;
    }

}

/* ==========================================
   Ende Smartphone-Abstand
   ========================================== */