:root {
    /*--gptbasis:#4ba79c; */
    --gptbasis:#5B3B87;
    /*--gptlogofarbe:#d24228; */
    --gptlogofarbe:#D45077; 
    
    --gptrose:#DE8C9A;
    --gptgelb:#FDF391;
    --gptblue:#C1E1EE;
    --gptrot:#D45077;
    --gptlila:#6D5092;
    --gpthellgruen:#DDE28E;
    --gptblau:#476195;
    --matabg:#ffcb06;
    --matatext:#d02835;
    --mausbg:#F0DBDB;
    --maustext:#A65886;
    --vetterbg:#0072bc;
    --vettertext:#fac0bf;
    --laechelnbg:#0083b7;
    --laechelntext:#feca26;
    --vogelbg:#D2909B;
    --vogeltext:#5A4581;
    
    --gptstudio:var(--gptgelb);
    --gptstudiotext:var(--gptrot);
    
    --gptspende:var(--gptgelb);
    
    --lesmisbg:#663A78;
    --lesmistext:#76B3C5;
    --peerbg:#F3DA88;
    --peertext:#B25F90;
    --zauberbg:#476195;
    --zaubertext:#DDE28E;
    --weiberbg:#486195;
    --weibertext:#d97588;
    --troyabg:#F3DA89;
    --troyatext:#489772;
    
    --carmenbg:#434076;
    --carmentext:#DA6884;
    --piratenbg:#C5E1E8;
    --piratentext:#614B8A;
    --alcinabg:#366DA7;
    --alcinatext:#FDF39E;
    --cagebg:#86306A;
    --waldmeistertext:#C8DEBD;
    --waldmeisterbg:#DA6884;
    --cagetext:#93C7EC;
    --liebestrankbg:#D3E3F2;
    --liebestranktext:#434076;
    --parisbg:#FDF17B;
    --paristext:#434076;
    
    --mut:#F0E456;
    --muttext:#C7482C;
    
}

html {
    background: #e6e9e9;
    background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
    -webkit-font-smoothing: antialiased;
}
body {
    background: #FFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 80 auto;
    height: 100%x;
    padding: 2em 2em 4em;
}

header{
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1000px;
    padding: 8px;
}

main{
    background: var(--gptblue);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1000px;
    padding: 8px;
}

main h2 , header h2{
    margin-top: 1.3em;
    background-color: var(--gptlogofarbe);
    color: white;
    margin: 3 auto;
    padding: 8px;
    line-height: 1.0;
}

footer {  
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    margin: 0 auto;
    background-color: var(--gptgelb);
    font-size: 16px;
    max-width: 1000px;
    padding: 8px;
}

footer h2 a{
    color: darkblue;
    text-decoration: none;
}

footer h3 a{
    color: darkblue;
    text-decoration: none;
}

nav{
    font-weight: bold;
    color: var(--gptlogofarbe);
    max-width: 1000px;
}

nav#menu{
    width: auto;
    height: 100%;
    
}
nav a {
    color: var(--gptlogofarbe);
}

a#button {
     color: white;/*var(--gptlogofarbe);*/
     background-color: var(--gptbasis);
     font-weight: 600;
     text-decoration: none;
}

button.start {
    height: 70px;
    width: 95%;
    font-size: 15px;
    background-color: var(--gptbasis);
    text-align: center;
    vertical-align: middle;
    color:white;
    font-weight: 600;
}

button.start2 {
    height: 70px;
    width: 50%;
    font-size: 15px;
    background-color: var(--gptbasis);
    text-align: center;
    vertical-align: middle;
    color:white;
    font-weight: 600;
}

button.gpt {
    height: 70px;
    font-size: 15px;
    background-color: var(--gptlila);
    text-align: center;
    vertical-align: middle;
    color:var(--gpthellgruen);
    font-weight: 600;
}

button.b50{
     color: var(--gptgelb);
     background-color: var(--gptrot);
     font-weight: 600;
     text-decoration: none;
     height: 70px;
     width: 50%;
     font-size: 15px;
     text-align:middle;
     float:center;
     margin:5px 5px 5px 0;
}

button.b1{
     color: var(--gptgelb);
     background-color: var(--gptrot);
     font-weight: 600;
     text-decoration: none;
     height: 30px;
     
     font-size: 15px;
     text-align:middle;
     
     margin:5px 5px 5px 0;
}
     
button.senden{
     color: var(--gptgelb);
     background-color: var(--gptrot);
     font-weight: 600;
     text-decoration: none;
     height: 70px;
     width: 30%;
     font-size: 15px;
     text-align:middle;
     float:left;
     margin:5px 5px 5px 0;
}

button.text{
    height: 70px;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
}

a.termin,
button.termin {
    height: 170px; 
    width: 100%;
    font-size: 12px;
    vertical-align: top;
}

button.linkstudio {
    height: 170px; 
    width: 100%;
    font-size: 12px;
    vertical-align: top;
}

button#linkstudio {
    color:var(--gptstudiotext);
    background-color:var(--gptstudio);
}

button#meisterklasse {
    color:#76B3C5;
    background-color:#663A78;
}

button.kalender {
    background-color:var(--gptgelb);
    color:var(--gptrot);
    height: 70px; 
    width: 50%;
    font-size: 15px;
    vertical-align: middle;
    text-align:center;
    font-weight: 800;
}

button.news {
    background-color:#FAF0E6;
    color:black;
    min-height: 270px; 
    
    vertical-align: left;
    text-align:left;
    
}

button.spende {
    height: 100px;
    width: 50%;
    font-size: 20px;
    background-color: var(--gptspende);
    text-align: center;
    vertical-align: middle;
    color: var(--gptblau);
    font-weight: 800;
}

a#aktuelles {
    
    color: var(--gptlogofarbe);
    background-color: WhiteSmoke;
    
   
    line-height: 1.4;
text-decoration: none;
font-weight: 600;
}

ul#aktuelles {
background-color: WhiteSmoke;
margin-top: 1.3em;
margin: 3 auto;
    padding: 8px;
    line-height: 1.0;

}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
}

h2.studio {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--gptstudio);
    color:var(--gptstudiotext);
}

div.studio {
    background-color:var(--gptstudio);
    padding: 8px;
   }

h2.mut {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--mut);
    color:var(--muttext);
}

div.mut {
    background-color:var(--mut);
    padding: 8px;
   }
   
h2.mata {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--matabg);
    color:var(--matatext);
}

div.mata {
    background-color:var(--matabg);
    padding: 8px;
   }

h2.vogel {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--vogelbg);
    color:var(--vogeltext);
}   

div.vogel {
    background-color:var(--vogelbg);
    color:var(--vogeltext);
    padding: 8px;
   }
   
h2.maus {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--mausbg);
    color:var(--maustext);
}

div.maus {
    background-color:var(--mausbg);
    color:var(--maustext);
    padding: 8px;
   }
   
h2.vetter {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--vetterbg);
    color:var(--vettertext);
}

div.vetter {
    background-color:var(--vetterbg);
    color:white;
    padding: 8px;
   }

h3.laecheln {
    margin: 0 auto;
    padding: 8px;
    line-height: 1.0;
    background-color:var(--laechelnbg);
    color:var(--laechelntext);
}

h3.box {
    margin: 0 auto;
    padding: 0px;
    line-height: 1.0;
    vertical-align:top;
    min-height:40px;
    color:black;
}

h3.box_lila {
    margin: 0 auto;
    padding: 0px;
    line-height: 1.4;
    vertical-align:top;
    text-align:center;
    min-height:100px;
    color:var(--gptlila);
    font-size:10pt;
}

h3.box_blau {
    margin: 0 auto;
    padding: 0px;
    line-height: 1.4;
    vertical-align:top;
    text-align:center;
    min-height:100px;
    color:var(--gptblau);
    font-size:10pt;
}

h3.box_rot {
    margin: 0 auto;
    padding: 0px;
    line-height: 1.4;
    vertical-align:top;
    text-align:center;
    min-height:100px;
    color:var(--gptrot);
    font-size:10pt;
}

h3.boxnews {
    margin: 0 auto;
    padding: 0px;
    line-height: 1.0;
    vertical-align:top;
    min-height:50px;
    color:black;
}

div.datum {
    text-align:right;
}
div.laecheln {
    background-color:var(--laechelnbg);
    color:var(--laechelntext);
    padding: 8px;
   }

header h3{
    margin-top: 1.3em;
    color: var(--gptbasis);
    
    margin: 3 auto;
    padding: 8px;
    line-height: 1.0;
}

div.hinweis{
    color: var(--gptbasis);
    font-weight: 600;
    margin: 3 auto;
    padding: 8px;
}
.box80 {
    margin-left: 10%;
    margin-right: 10%;
    width:80%;
    
    }
    
.zitat{
    text-align: left;
    background-color:white;
    color: #8FBC8F;
    font:italic;
    padding:8px;
    }

.zitat-von{
    color: #708090;
    background-color:white;
    text-align: right;
    padding:8px;
    }
      
a.termin {
    text-decoration: none;
}

a#ticket {
    font-size: 20pt;
    color: azure;
    background-color: darkred;
}

b. strong {
    font-weight: 600;
}

samp {
    display: none;
}

fieldset div {
    width:100%;
}

label {
    min-width: 100px;
    }

div#label {
    min-width: 100px;
    }

div#tag{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

div#monat{
    font-size: 12px;
    text-align: center;
}

div#jahr{
    font-size: 12px;
    text-align: center;
}

table {
    width:100%;
}

td#stammtisch, button#stammtisch, a#stammtisch{
    background-color: lemonchiffon;
}

td#meet, button#meet, a#meet{
    background-color:#99d1c8;
}

td#mata, button#mata{
    background-color:#ffcb06;
}

td#fledermaus, td#fledermaus a, button#fledermaus {
    background-color:var(--mausbg);
    color:var(--maustext);
   }

td#cage, td#cage a, button#cage, a#cage{
    background-color:var(--cagebg);
    color:var(--cagetext);
   }

td#cage h3, td#cage h4{
    color:var(--cagetext);
    }

td#vogel, td#vogel a, button#vogel, a#vogel {
    background-color:var(--vogelbg);
    color:var(--vogeltext);
   }
   
td#meet h3.termin{
    color:var(--gptlogo);
}

td#fuehrung, button#fuehrung, a#fuehrung{
    background-color: lightblue;
}

td#verein, button#verein, a#verein{
    background-color: violet;
}

td#theater, button#theater, a#theater{
    background-color: orange;
    color: black;
}

td#theater, button#theater{
    background-color: var(--gpthellgruen);
    color: black;
}

td#mut, button#mut, a#mut{
    background-color: var(--mut);
    color: black;
}

td#fahrt, button#fahrt, a#fahrt{
    background-color: lightcoral;
}

td#liebestrank, button#liebestrank, a#liebestrank{
    background-color: lightcoral;
}

td#fremdgehen{
    background-color: lightyellow;
}

table#beitrag {
    max-width:50em;    
}

table#beitrag tr{
    color: black;
    background-color: var(--gptgelb);
}

th.beitrag,
td.beitrag{
    text-align: right;
}

div#termin_titel{
    text-transform: uppercase;
    text-align: center;
    font-size:30px;
    font-weight: bold;
    
    text-decoration: none;
}

div#fehler{
    color:red;
}

div#{
    text-transform: uppercase;
    text-align: center;
    font-size:20px;
    font-weight: bold;
    color: darkblue;
    text-decoration: none;
}
div#termin_person, div#termin_person a{
    text-transform: uppercase;
    text-align: center;
    font-size:30px;
    font-weight: bold;
    color: darkgoldenrod;
    text-decoration: none;
}

div#termin_untertitel{
    text-align: center;
    font-size:16px;
    text-decoration: none;
}

div#ort, div#ort a{
    text-align: center;
    font-size:16px;
    text-decoration: none;
}

div#beschreibung{
    font-size:15px;
    text-decoration: none;
}

figcaption, div#foto{
    font-size:10px;
    text-decoration: none;
    text-align: center;
}

div#fkgpt{
    text-transform:none;
    text-align: left;
    font-size:15px;
    font-weight: bold;
    color: var(--gptlogofarbe);
    text-decoration: none;
}

div#rolle{
    text-transform: uppercase;
    text-align: center;
    font-size:20px;
    font-weight: bold;
    color: darkblue;
    text-decoration: none;
}

img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}
img.termin{
    width: 65%;
    
}
img.qr{
    width: 60%;
    
}
@media all  {
img.article {
    max-height: 70em;
    width: auto;
}
}

@media all and (min-width:70em) {
img.article {
    max-height: 25em;
    width: auto;
}
} 

img.nwl {
    max-height: 10em;
    width: auto;
}


#navlink {
	font-size: 2em;
	text-decoration: none;
	position: fixed;
    top:1em;
    left:1em;
	display: inline-block;
	width: 1px;
	overflow: hidden;
	padding-left: 1em;
	margin-right: 2rem;
}
			
#navlink::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1em;
	height: 0.2em;
	border-top: 0.6em double var(--gptbasis);
	border-bottom: 0.2em solid var(--gptbasis);
}

#cross-rounded-borders{
    font-size: 2.5em;
    font-weight: bold;
	text-decoration: none;
	position: fixed;
    top:0.5em;
    left:1em;
	display: inline-block;
	width: 1px;
	overflow: hidden;
	padding-left: 1em;
	margin-right: 2rem;    
}
   
#cross-rounded-borders:before{
    content: "X";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 1em;
	height: 0.2em;
	color: var(--gptbasis);
} 
    }

button.nav_link
{
    width: 300%;
    height: auto;
}

@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}

footer h2 {
    text-transform: uppercase;
    font-size: 16px;
}

.ical:before {
  content: "\f073" !important;
}

ul.menu{
    text-align: center;
    font-size:25px;
    color:var(--gptbasis);
	text-decoration: none;
    list-style: none;
}
ul.menu li{
    margin:20px;
}
ul.menu li h2{
    color: var(--gptlogofarbe);
    background-color: var(--gptgelb);
    font-size:25px;
    margin: 0px;
    padding: 0px;
}
ul.menu li a{
    margin: 1em;
    color:var(--gptbasis);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 0.2em solid var(--gptlogofarbe);
}

fieldset{
    background-color:var(--gptblue);
    color:var(--gptlila);
}

legend{
    background-color:var(--gptlila);
    color:var(--gptblue);
    font-weight:bold;
}

td.labelma{
    width:25%;
}

td.eingabe input{
    width:35%;
}

td.eingabe select{
    width:35%;
}

td.eingabe input.hnr{
    width:10%;
}

td.eingabe input.plz{
    width:10%;
}



textarea.form{
    width: 20em;
}

h3.scheinwerfer{
    text-align:center;    
}

div.scheinwerfer{
    text-align:center;    
}

div.scheinwerfer-datum{
    text-align:right;    
}

div.fussnote1 {
    text-align:right;
    font-size:10px;
    }

span.scheinwerfer-projekt{
    font-weight:bold;
}

select, option, input{
    font-size: 15px;
    width:66%;
}

input#sepa_erlaubnis, input#agb{
 width:6%;
}
input.senden{
    height: 70px;
    width: 66%%;
    font-size: 15px;
    background-color: var(--gptbasis);
    text-align: center;
    vertical-align: middle;
    color:white;
    font-weight: 600;
}

select#item-options{
    font-size:25px;
}

select#quantitySelect{
    font-size:25px;
}

@media all  {
table#karte {
    max-width:70em;    
}

table#karte tr{
    color: black;
    background-color: var(--gptbasis);
}

th#karte,
td#karte{
    text-align: right;
}
}

@media all and (min-width:70em) {
table#karte {
    max-width:30em;    
}

table#karte tr{
    color: black;
    background-color: var(--gptbasis);
}

th#karte,
td#karte{
    text-align: right;
}
} 

@media all  {
table#karte2 {
    max-width:70em;    
}

table#karte2 tr{
    color: black;
    background-color: var(--gptgelb);
}

th#karte2,
td#karte2{
    text-align: right;
}
}

@media all and (min-width:70em) {
table#karte2 {
    max-width:30em;    
}

table#karte2 tr{
    color: black;
    background-color: var(--gptgelb);
}

th#karte2,
td#karte2{
    text-align: right;
}
} 
.container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px;
        }

        .iframe {
            width: 100%;
            height: 310px; /* Anpassen Sie die Höhe nach Bedarf */
            border: none;
        }

        @media all and (min-width: 70em) {
            .container {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }
        
.textbox-container, .textbox_news-container {
            display: flex;
            flex-wrap: wrap;
        }

.textbox {
            flex: 1;
            margin: 10px;
            padding: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            min-width: 300px;
        }
.textbox_news {
            flex: 1;
            margin: 1px;
            padding: 2px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            min-width: 250px;
            vertical-align:top;
        }
.textbox_rose {
            flex: 1;
            margin: 10px;
            padding: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            background-color: var(--gptrose);
            min-width: 300px;
        }
        
.textbox_gelb {
            flex: 1;
            margin: 10px;
            padding: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            background-color: var(--gptgelb);
            min-width: 300px;
        }
        
.textbox_gruen {
            flex: 1;
            margin: 10px;
            padding: 20px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            background-color: var(--gpthellgruen);
            min-width: 300px;
        }
        
 @media screen and (max-width: 400px) {
            /* Anpassung für schmale Bildschirme */
            .textbox {
                flex-basis: calc(100% - 20px);
                
             .textbox-container {
                flex-direction: column;
            
            }