/* ==================================================
   TAKTKLAR CSS 2.0
   Teil 1
   Reset · Variablen · Basislayout
   ================================================== */


/* ==================================================
   01 RESET
   ================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    margin:2px;
    padding:2px;
    overflow-x:hidden;

    background:#000 url("/go/images/5.gif") repeat;

    color:#CCCCCC;

    font-family:
        "Montserrat Alternates",
        Arial,
        Helvetica,
        sans-serif;

    line-height:1.5;
}


/* ==================================================
   02 ROOT VARIABLEN
   ================================================== */

:root{

    /* Breiten */

    --article-width:768px;
    --container-max:1920px;

    /* Abstände */

    --gap:3.5rem;

    /* Farben */

    --accent:#FFECC2;

    --text:#CCCCCC;
    --text-light:#FFFFFF;

    --bg-dark:#0E0E0E;
    --bg-overlay:rgba(38,43,49,.80);

    --shadow:rgba(0,0,0,.50);

    /* Radius */

    --radius:6px;

    /* Animation */

    --transition:.30s ease;
}


/* ==================================================
   03 LINKS
   ================================================== */

a{

    color:var(--accent);

    text-decoration:none;

    transition:color var(--transition);

}

a:hover{

    text-decoration:underline;

}


/* ==================================================
   04 STANDARD TYPOGRAFIE
   ================================================== */

.Text{

    font-size:1.1rem;

    line-height:1.6;

    text-align:center;

}

.TableText{

    font-size:.70rem;

    line-height:1.0;

}

.Headline{

    font-size:1.5rem;

    font-weight:bold;

    line-height:1.30;

}

.TextPicture{

    padding:8px;

    border-radius:var(--radius);

    color:#FFFFFF;

    background:
        linear-gradient(
            to bottom,
            rgba(71,80,95,.70),
            rgba(38,43,49,.70)
        );

    font-family:Ebrima,sans-serif;

    font-style:oblique;

    font-size:1rem;

    text-align:left;

}

td.TextPicture{

    text-align:center;

    line-height:1.2;

    font-size:1.1rem;

}


/* ==================================================
   05 BILDER
   ================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

    border:0;

}


/* Tabellenbilder */

td img{

    display:block;

    width:100%;

    height:auto !important;

    padding:0px;

    margin:0;

    background:transparent;

}


/* historische Border */

img[border="1"]{

    border:none !important;

}


/* große Artikelbilder */

img[width="424"],
img[width="426"],
img[width="428"]{

    width:100% !important;

    max-width:calc(var(--article-width) - 2px);

    margin:0 auto;

}


/* ==================================================
   06 TABELLEN
   ================================================== */

table{

    border-collapse:collapse;

    border-spacing:0;

    width:auto;

    max-width:100%;

}

table[width]{

    max-width:100% !important;

}

/* historische Tabellenbreiten */

table[width="428"],
table[width="430"],
table[width="450"],
table[width="500"],
table[width="550"],
table[width="600"],
table[width="650"],
table[width="700"],
table[width="750"],
table[width="800"]{

    width:100% !important;

    max-width:var(--article-width);

    margin:auto;

}

td{

    vertical-align:top;

}

td[colspan="3"]{

    height:auto !important;

}


/* ==================================================
   07 HISTORISCHE SPACER-GRAFIKEN
   ================================================== */

img[src$="13.gif"],
img[src$="23.gif"],
img[src$="5p.gif"],
img[src$="tb.gif"]{

    display:none;

    width:0;

    height:0;

}/* ==================================================
   TAKTKLAR CSS 2.0
   Teil 2
   Header · Navigation · Layout
   ================================================== */


/* ==================================================
   08 HEADER
   ================================================== */

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:2.4rem;

    background:rgba(38,43,49,.80);

    color:#F7F7F7;

    font-size:24px;

    z-index:2000;

}


/* ==================================================
   09 LOGO
   ================================================== */

.logo{

    position:fixed;

    top:.6rem;

    left:1.4rem;

    z-index:2100;

    margin:0;

    font-size:3.2rem;

    line-height:1;

    color:#D9D9D9;

    user-select:none;

}


/* ==================================================
   10 MOBILE MENU
   ================================================== */

.menu-toggle{

    display:flex;

    position:fixed;

    top:25px;

    right:20px;

    width:30px;

    height:20px;

    flex-direction:column;

    justify-content:space-between;

    cursor:pointer;

    z-index:2200;

}

.menu-toggle div{

    width:77%;

    height:2px;

    border-radius:2px;

    background:#D9D9D9;

    transition:all var(--transition);

}

.menu-toggle:hover div{

    background:var(--accent);

}

.menu-toggle.active div:nth-child(1){

    position:absolute;

    top:50%;

    transform:rotate(45deg);

}

.menu-toggle.active div:nth-child(2){

    opacity:0;

}

.menu-toggle.active div:nth-child(3){

    position:absolute;

    top:50%;

    transform:rotate(-45deg);

}


/* ==================================================
   11 NAVIGATION
   ================================================== */

nav{

    display:none;

}

nav.active{

    display:flex;

    flex-direction:column;

    align-items:center;

    position:fixed;

    inset:0;

    padding-top:90px;

    padding-bottom:50px;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,1),

            rgba(0,0,0,0)

        );

    z-index:1900;

}

nav a{

    margin:10px 0;

    padding:8px 42px;

    font-size:1.4rem;

    color:#D9D9D9;

    text-shadow:1px 1px 1px #000;

    border-radius:7px;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,1),

            rgba(0,0,0,.70)

        );

    transition:

        background var(--transition),

        color var(--transition);

}

nav a:hover{

    background:rgba(38,43,49,.90);

    color:var(--accent);

}


/* ==================================================
   12 SUCHFELD
   ================================================== */

.searchForm{

    display:flex;

    align-items:center;

    justify-content:center;

    width:90%;

    max-width:400px;

    margin:1rem auto;

    padding:.3rem;

    background:rgba(149,149,149,.70);

    border-radius:4px;

    box-shadow:0 4px 6px var(--shadow);

}

.searchField{

    flex:1;

    padding:.5rem;

    border:none;

    outline:none;

    border-radius:4px 0 0 4px;

    background:rgba(77,77,77,.70);

    color:#FFF;

    font-size:1rem;

}

.searchField::placeholder{

    color:#CCC;

}

.searchButton{

    padding:.5rem;

    border:none;

    cursor:pointer;

    border-radius:0 4px 4px 0;

    background:rgba(77,77,77,.70);

    color:#FFF;

    transition:all var(--transition);

}

.searchButton:hover{

    background:var(--accent);

    color:#111;

}


/* ==================================================
   13 KOPFSPALTE
   ================================================== */

.kopfspalte{

    width:100%;

    margin-top:4.7rem;

    text-align:center;

    background:var(--bg-dark);

}

.kopfspalte img{

    display:block;

    width:100%;

    margin:auto;

}

.kopfspalte h2{

    margin:0;

    padding:.7rem;

    font-size:1.4rem;

    color:var(--text);

}


/* ==================================================
   14 HAUPTLAYOUT
   ================================================== */

main{

    flex:1;

    padding:0;

}

.container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--gap);

    max-width:var(--container-max);

    margin:auto;

    padding:3.5rem .7rem;

}


/* ==================================================
   15 FORMULARE
   ================================================== */

.contact-form{

    display:flex;

    flex-direction:column;

    max-width:500px;

    margin:auto;

    padding:1.5rem;

    background:var(--bg-overlay);

    border-radius:8px;

    box-shadow:0 4px 8px var(--shadow);

}

.contact-form label{

    margin:.5rem 0;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    margin:.5rem 0 1rem;

    padding:.75rem;

    border:1px solid rgba(255,255,255,.20);

    border-radius:4px;

    background:rgba(38,43,49,.80);

    color:#FFF;

    font:inherit;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:var(--accent);

    outline:none;

}

.contact-form button{

    padding:.75rem;

    border:none;

    cursor:pointer;

    border-radius:4px;

    background:var(--bg-dark);

    color:#DDD;

    transition:all var(--transition);

}

.contact-form button:hover{

    background:var(--accent);

    color:#111;

}


/* ==================================================
   16 FOOTER
   ================================================== */

footer{

    margin-top:auto;

    padding:1.5rem 0;

    text-align:center;

    font-size:.8rem;

    color:#CCC;

    background:

        linear-gradient(

            to bottom,

            rgba(38,43,49,0),

            rgba(38,43,49,.70)

        );

}


/* ==================================================
   17 EMBEDS
   ================================================== */

iframe,
embed,
object,
video{

    display:block;

    max-width:100%;

}

input,
select,
textarea{

    max-width:100%;

    font-family:inherit;

}
/* ==================================================
   TAKTKLAR CSS 2.0
   Teil 3
   Galerie · Historische Bilder · Responsive
   ================================================== */





.Text a {
    display: inline;
    vertical-align: top;
    width: 100%;
    padding: 0px;
    vertical-align: top;
}

.Text a img {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    height: auto;
}






/* ==================================================
   19 HISTORISCHE BILDBREITEN
   ================================================== */

/* Galerie */

.Text img[width="120"]{

    width:180px;

    display:inline-block;

    vertical-align:top;

}

/* 1/3 Breite */

.Text img[width="139"],
.Text img[width="140"]{
    width:auto;
    max-width:32.25%;

    display:inline-block;

    vertical-align:top;

    margin:2px 0;

}

/* Halbformat */

.Text img[width="240"]{
     width:auto;
    max-width:56%;

    display:inline-block;

    vertical-align:top;

    margin-top:2px;

}

/* Zweidrittel */

.Text img[width="283"]{
     width:auto;
    max-width:65.5%;

    display:inline-block;

    vertical-align:top;

    margin:2px 0;

}

/* Gro�Ÿe Artikelbilder */

.Text img[width="424"],
.Text img[width="425"],
.Text img[width="426"]{

    display:inline-block;

    width:auto;

    max-width:99%;

    margin:0 auto;

}



/* ==================================================
   20 GROSSBILDER
   ================================================== */

figure{

    margin:0 auto;

    text-align:center;

}

figure img{

    display:block;

    margin:auto;

}

figcaption{

    margin-top:.5rem;

    line-height:1.4;

}


/* ==================================================
   21 DESKTOP
   ================================================== */

@media (min-width:1281px){

    .container{

        grid-template-columns:repeat(3,1fr);

    }

}


/* ==================================================
   22 GROSSE MONITORE
   ================================================== */

@media (min-width:1920px){

    .container{

        grid-template-columns:repeat(4,1fr);

        max-width:2400px;

    }

}


/* ==================================================
   23 TABLET
   ================================================== */

@media (min-width:769px) and (max-width:1280px){

    .container{

        grid-template-columns:repeat(2,1fr);

    }

}


/* ==================================================
   24 SMARTPHONE
   ================================================== */


@media (max-width:768px){

    .container{

        grid-template-columns:1fr;

        gap:2rem;

    }

    header{

        padding:2.7rem;

    }

    


    .logo{

        top:1.2rem;

        left:1.2rem;

        font-size:2.1rem;

    }

    .menu-toggle{

        display:flex;

    }

    .Headline{

        font-size:1.4rem;

    }

    .TableText{

        font-size:.8rem;

    }

    .Text{

        font-size:1.05rem;

    }

    .TextPicture{

        font-size:.95rem;

        line-height:1.3;

    }

}


/* ==================================================
   25 KLEINE SMARTPHONES
   ================================================== */

@media (max-width:480px){

    body{

        margin:0;

        padding:0;

    }

    header{

        padding-top:1.7rem;

    }

    .kopfspalte{

        margin-top:4.2rem;

    }

    table{

        width:100% !important;

    }

    .Headline{

        font-size:1.3rem;

    }

    .TableText{

        font-size:.75rem;

    }

    .Text{

        font-size:1rem;

    }

    .TextPicture{

        font-size:.9rem;

    }

    font[size="1"]{

        font-size:.75rem;

    }

    font[size="2"]{

        font-size:.85rem;

    }

    font[size="3"]{

        font-size:1rem;

    }

}


/* ==================================================
   26 SEHR KLEINE DISPLAYS
   ================================================== */

@media (max-width:375px){

    .Headline{

        font-size:1rem;

    }

    .Text{

        font-size:.80rem;

    }

    .TableText{

        font-size:.60rem;

    }

    .TextPicture{

        font-size:.75rem;

    }

}


/* ==================================================
   27 MINI-DISPLAYS
   ================================================== */

@media (max-width:360px){

    .TextPicture{

        font-size:.70rem;

    }

}


/* ==================================================
   ENDE CSS 2.0
   ================================================== */