/* Variablen Deklarationen  */
:root {
    --header-absolute-padding: 20px;
    --header-height-large: 150px;
    --header-height-small: 60px;

    --kk-color-header-background:  rgba(0, 0, 0, 1);

    --kk-fontsize-xl: 3em;
    --kk-fontsize-l: x-large;

    --kk-color-aussen-tuerkis: #6a8683;
    --kk-color-schwarz: black;
    --kk-color-weiss: #ffffff;
    --kk-color-links: #fdd487;
    --kk-color-orange: #d4992a;
    --kk-color-hell-orange: #ffd484;
    --kk-color-tuerkis:  #36726b;
    --kk-color-grau: #525252;
    --kk-color-blass-tuerkis: #3a6663;
}

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

p {
    padding: 0px;
    margin: 0px;
    padding-bottom: 0.5em;
}

h1 {
    font-size: 36px;
    padding: 0em;
    margin: 1em 0em 0.5em 0em;
    clear: both;
} 

h2 { 
    font-size: 24px;
    padding: 0em;
    margin: 0.5em 0em 0.5em 0em;
    clear: both;
}

body {
    padding: 0px;
    margin: 0px;


    /* schwarzer Hintergrund fuer unter'm footer */
    background-color: var(--kk-color-schwarz);
    /* background-color: var(--kk-color-tuerkis); */
    /* background-color: var(--kk-color-aussen-tuerkis); */
    /* background-color: var(--kk-color-blass-tuerkis); */
    /* background-color: var(--kk-color-grau); */
    font-family: "Open Sans", "Helvetica New", sans-serif;
    font-weight: 500; 
    /* font-size: 14px; */
    /* line-height: 1.5em; */
}



#container-header {
    height: var(--header-height-large);
    transition: 0.3s;
}

header {
    position: fixed;
    width: 100%;
    z-index: 10;
    height: var(--header-height-large);
    background-color: var(--kk-color-header-background);
    /* background: 
        linear-gradient(180deg, 
                        var(--kk-color-schwarz) 0%, 
                        var(--kk-color-tuerkis) 6em, 
                        var(--kk-color-tuerkis) 100%); */
    transition: 0.3s;
}

header div.main-centered {
/* header div { */
    display: flex;
    flex-direction: row;

    color: var(--kk-color-orange);
    max-height: 100%;
}

.main-centered {
    max-width: 800px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


.header-logo {
    width: auto;
    max-height: 100%;
}

.header-logo a {
    max-width: 100%;
    max-height: 100%;
}
#header-logo {
    max-width: 100%;
    max-height: 100%;
    /* max-height: 150px; */
    width: auto;
    height: auto;
}

img#header-logo {
    padding: 0.5em 0 0.5em 0.18em;
}

img.kammertheaterlinkbild {
    padding: 2px;
    background-color: white;
}

/* #container-middle {
    background: linear-gradient(180deg, var(--kk-color-schwarz) 0%, var(--kk-color-tuerkis) 6em, var(--kk-color-tuerkis) 100%);
} */

#container-middle {
    background: linear-gradient(to right, 
                                var(--kk-color-orange) 0%, 
                                var(--kk-color-tuerkis) 80%);
}

/* #container-middle-gradient::after { */
/* #container-middle::after {
    content:"";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215));
    -webkit-mask: linear-gradient(to bottom,#0000, #000);
    mask: linear-gradient(to bottom,#0000, #000);
    z-index: 1;
  } */

#container-middle-foreground {
    position: sticky;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 3;
}


main {
    color: var(--kk-color-weiss);
}

a,
a:visited {
    color: var(--kk-color-links);
}


#container-footer {
    background-color: var(--kk-color-schwarz);
    clear: both;
}

/* #container-footer::before {
    content:"";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215));
    -webkit-mask: linear-gradient(to bottom,#0000, #000);
    mask: linear-gradient(to bottom,#0000, #000);
    z-index: 1;
} */

/* 
  Social Media 
*/
.social-media {
    font-family: Consolas, serif;
    font-size: small;

    text-align: center;
    width: max-content;
    margin-left: auto;
    margin-right: auto;

    background-color: var(--kk-color-schwarz);
    color: var(--kk-color-weiss);

    display: flex;
    flex-direction: row;
    align-items: end;
}

.social-media .sm-label {
    padding-left: 0;
    padding-right: 0;

    /* Flex Layout für das Label war die einzige gefundene Methode
       die vertikale Position zu beeinflussen
     */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

.social-media .sm-label > * {
    /* vertical-align: middle; */
}

.social-media > div {
    padding: 0.5em;
}

.social-media .sm-provider img {
    height: auto;
    /* height: 35px; */
    width: 35px;
}


/* Impressum 
 */
 .impressum {
    font-family: Consolas, serif;
    font-size: small;

    background-color: black;
    color: rgb(173, 173, 173);

    padding: 2em;
    padding-top: 0em;
}

.impressum .ueberschrift {
    text-decoration: underline;
}

.impressum .titel {
    font-weight: bold;
}

.impressum .bla {
    color: rgb(97, 97, 97);
}

.impressum .info {
    color: inherit;
}