/* Shared styles for index.html and image-sources.html */
:root{
    color-scheme:dark;
    --bg:#24262b;
    --panel:#2e3037;
    --ink:#ece4d3;
    --mute:#b3ab98;
    --accent:#8fb0ff;
    --line:#4a4c55;
    --btn:#d6b98a;
    --btnink:#25262b;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px)
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:400 1rem/1.6 "IBM Plex Serif",Georgia,serif
}

/* show only the active language */
[data-lang="en"] [lang="de"],[data-lang="de"] [lang="en"]{display:none!important}

h1,h2,th,.btn,.nav,.era{font-family:"Archivo Narrow","Arial Narrow",Arial,sans-serif}

/* top bar and language switch */
.top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1rem clamp(1rem,4vw,3rem);
    border-bottom:1px solid var(--line)
}
.sw{
    display:flex;
    border:1px solid var(--ink);
    border-radius:3px;
    overflow:hidden
}
.sw button{
    font:700 .9rem "Archivo Narrow","Arial Narrow",Arial,sans-serif;
    background:none;
    color:var(--ink);
    border:0;
    padding:.35rem .8rem;
    cursor:pointer
}

[data-lang="en"] .sw [data-set="en"],[data-lang="de"] .sw [data-set="de"]{
    background:var(--ink);
    color:var(--bg)
}

button:focus-visible,a:focus-visible,input:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:2px
}
footer{
    border-top:1px solid var(--line);
    padding:1.5rem clamp(1rem,4vw,3rem);
    color:var(--mute);
    font-size:.9rem;
    text-align:center
}