/*
 


CSS Syntax 
 
selector {property: value (s); }

1. Tag Selector -> body, footer, h1, a, ...
2. Class selector -> .class-x, .class-y, .class-z
3. PSEUDOCLASS selector -> :jover, :checked, :focus, :nth-of-type ...


------------------------------------------------------------------------------------------
CSS Units:

1PX -> kleinste Einheit am aktuellen Screen 

1EM -> die aktuelle Schriftgröße für das Element, basierend auf den Einstellung im Browser 

1CH -> Breite der Null in der aktuellen Schrift und Schriftgröße 

1VW -> 1 Prozent der aktuellen Viewport-Breite

1VH -> 1 Prozent der aktuellen Viewport-Höhe    

1% -> 1 Prozent der Breite  bzw. Höhe des Elternelements 





 */

* {
    box-sizing: border-box;
}

body {
    display: block;
    margin: 0;
}

header {
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.91) 0%, rgba(0, 0, 0, 0.51) 4%, rgba(0, 0, 0, 0.43) 100%),
        url(../img/theater-bilder/imager.webp);
    background-size: 1550px;


    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    min-height: 100vh;
    /*min-height: 100vh;
        width: 50vw;*/

    padding: 3em 5vw;

    /*background: #5b7a7a;
    background: linear-gradient(
        90deg,
        rgba(91, 122, 122, 1) 10%,
        rgba(155, 191, 204, 1) 54%,
        rgba(145, 196, 190, 1) 97%
    );*/

    /*  background: #478196;
background: linear-gradient(90deg, rgba(71, 129, 150, 1) 10%, rgba(82, 141, 154, 1) 27%, rgba(134, 196, 174, 1) 89%);*/

    /* border-top: solid 0.02em #85ffaf
    border-right: solid 0.02em #85ffaf*/
    /*border-bottom: solid 0.2em #493843;*/
    /*border-left:  0.02em #85ffaf   */
}

h1 {
    font-size: 2.5em;
    margin-top: 3em;
    margin-bottom: 0;
    color: #ffffff;
    transition: all 0.8s ease-out;
    text-align: center;

    
    
}
/*h1:hover {
 * 
    color: #000000;
}*/

h1 a {
 text-decoration: none; 
    color: white; 
   font-size: 1.5em; 
    
    
}


h2 {
    margin-top: 0;
    margin-bottom: 0.3em;
    font-size: 2.5em;

    font-weight: normal;
}

article {
    box-sizing: border-box;

    background-color: #ffffff;

    padding: 3em 0 5em 0;
}

p {
    font-size: 1.2em;
    max-width: 75ch;
    margin: 1.5em auto;

    line-height: 1.5em;
}

a {
    color: black;
}

nav a {
    background-color: white;
    text-decoration: none;
    padding-top: 0.4em;
    padding-right: 0.8em;
    padding-left: 0.8em;
    padding-bottom: 0.4em;
    transition: all 0.8s ease-out;

    border: 1px solid #000000;
}

nav a:hover {
    background-color: #000000;
    color: white;
}

img {
    width: 100%;
}

main {
    /*   padding-top: 10vh;
    padding-right: 1.5em;
    padding-bottom: 8vh;
    padding-left: 1.5em;*/
}

h1 {
    font-size: 5em;
    text-align: center;
}

footer {
    background-color: #f0e9e3;
    color: black;
    font-size: 0.9;
    padding-top: 1.5em;
    padding-right: 2em;
    padding-bottom: 1.5em;
    padding-left: 2em;
    border-top: solid 0.08em; 
    min-height: 30vh; 
}

footer a {
    display: flex; 
    flex-direction: column;
    text-decoration: none;
    padding: 0.5em; 
    
    
}

li {
    margin: 1.8em 0;
    border-top: solid 0.1em;
    padding: 0.8em 2em;
}

ul {
    list-style: none;

    font-size: 1.2em;
    max-width: 100ch;
    margin: 2.2em auto;
    padding-left: 0;
}

figure {
    margin: 0;
}

figcaption {
    padding: 0.5em 2em 1.2em 2em;
    text-align-last: center;
}

.important {
    font-size: 1.5em;
    text-align: center;
    padding: 2em;
    border-top: solid 4px;
    border-bottom: solid 4px;
    max-width: none;
}

.current {
    background-color: #000000;
    color: white;
}

/*.color-scheme-three main {
    background-color: #a9bcd0;
}

.color-scheme-three header {
    background-color: #414b64;
}

.color-scheme-two main {
    background-color: #dbb1bc;
}

.color-scheme-two header {
    background-color: #726da8;
}

.color-scheme-one main {
    background-color: #857c8d;
}

.color-scheme-one header {
    background-image: url(../img/bg-image.webp);
    background: linear-gradient(
        90deg,
        rgba(168, 158, 176, 1) 4%,
        rgba(171, 147, 196, 1) 53%,
        rgba(168, 158, 176, 1) 93%
    );
    
}*/

.container {
    margin: 2.5em 0;
    padding: 1em;
    background-color: #f7cad7;
}

.item {
    margin: 0.5em;
    padding: 0.5em;
    background-color: white;
}

.disblock .item {
    display: block;
}

.disinline .item {
    display: inline;
}

.disinlineblock .item {
    display: inline-block;
}

.disflex .container {
    display: flex;
    justify-content: flex-end;

    align-items: stretch;

    flex-direction: row;
    flex-wrap: wrap;
    min-height: 40vh;
}

.disflex .item {
    min-width: 30ch;
    /*max-width: 45ch;*/
    flex-grow: 1;

    background-color: white;
}

h3 {
    font-size: 2.2em;
    text-align-last: center;
    margin-top: 0.8em;
    margin-bottom: 0.5em;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.image-container figure {
    width: 420px;
    margin: 2px;
    flex-grow: 1;
}

.image-container img {
    filter: grayscale(100%);
    transition: filter 0.5s ease-out;
}

.image-container img:hover {
    filter: none;
}

.beige {
    background-color: #fff0ec;
    
}

.innerbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    gap: 40px;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 50vh;
    
}

.innerbox img {
    width: 60%;
    max-width: 600px;
}

.text {
    width: 35ch;
    flex-grow: 1;
}


.text-2{ 
width: 35ch; 
    flex-grow: 1; 
    text-align: center; 
   
}




.button {
    border: 2px solid var(--e2s-color, #000) !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0.94em !important;
    font-family: "PPAgrandirWideBold", arial, helvetica, clean, sans-serif;
    line-height: 16px !important;
    margin: 0;
    padding: 12px 20px !important;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.28px;
    background-color: var(--e2s-bg-color, #fff0ec);
}

.background {
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.91) 0%, rgba(0, 0, 0, 0.51) 4%, rgba(0, 0, 0, 0.43) 100%),
        url(../img/bg-image.webp);
    min-height: 50vh;
    background-size: 1000px;
}


.html { 
text-align: center;
color: #fff1f1;
display:flex;
flex-direction: column;
justify-content: center;
gap: 20px; 
}

.black {
background-color: #2e303c; 
color: white; 

}














article {
  background: #f6f1e8;
  color: #111;
  font-family: Arial, sans-serif;
  padding: 40px;
}

.tw-accordion {
  margin-top: 40px;
  border-top: 2px solid #111;
}

.tw-accordion details {
  border-bottom: 2px solid #111;
}

.tw-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 48px 24px 0;
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.tw-accordion summary::-webkit-details-marker {
  display: none;
}

.tw-accordion summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 20px;
  font-size: 36px;
  font-weight: 400;
}

.tw-accordion details[open] summary::after {
  content: "–";
}

.tw-accordion details > div {
  padding: 0 0 28px 0;
  font-size: 18px;
  line-height: 1.6;
}

.tw-accordion p {
  margin-top: 0;
}









/*

.daniel { 
    background-color: lightgreen;
        margin: 2em;
        padding: 3em;
        border:solid pink 10px;
        font-size: 2em; 
    
}
*/

/*.color-scheme-one a {
    display: block;
}*/

/*.color-scheme-two footer {
    display: inline-block;
}*/