article {
    margin: 0;
}

#Container {
    width: 100%;
    height: calc(100vh - 280px); /* Sabine Pfuschrechnung */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    --kachelbreite: 12em;
    --kachelhoehe: 5em;
    --kachelabstand: 3em;
    --maxkachelbreite: 175px;
}

#Container p {
    margin-top: 5px;
}

#Container:before {
    content: url(media/ctc/microbackground.jpg);
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    opacity: 0.4;
    transition: opacity 0.5s ease-in;
}

#Container.Initial:before {
    opacity: 0.7;   
}

#Infodisplay {
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 1em 3em;
    position: relative;
    background-color: rgba(255, 255, 255, 0.774);
    backdrop-filter: blur(10px);
    width: calc(100% - 1.7 * var(--maxkachelbreite));
    height: 80%;
}

.Thema{
    color: white;
    padding: 0.4em 0.6em;
    background-color: #234d79;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--maxkachelbreite);
    position: absolute;
    text-wrap: nowrap;
    cursor: pointer;
}


/* dicht */

.Initial .Thema {
    width: var(--kachelbreite);
    max-width: var(--kachelbreite);
    height: var(--kachelhoehe);
}

/* 10 1 2 3 */
/*  9     4 */
/*  8 7 6 5 */

.Initial .Thema.Reihe1 {
    top: calc(50% - 1.5 * var(--kachelhoehe) - var(--kachelabstand));
}

.Initial .Thema.Reihe2 {
    top: calc(50% - 0.5 * var(--kachelhoehe));
}

.Initial .Thema.Reihe3 {
    top: calc(50% + 0.5 * var(--kachelhoehe) + var(--kachelabstand));
}

.Initial .Thema.Spalte1{
       left: calc(50% - 2 * var(--kachelbreite) - 1.5 * var(--kachelabstand));    
}

.Initial .Thema.Spalte2{
       left: calc(50% - 1 * var(--kachelbreite) - 0.5 * var(--kachelabstand));    
}

.Initial .Thema.Spalte3{
       left: calc(50% + 0.5 * var(--kachelabstand));    
}

.Initial .Thema.Spalte4{
       left: calc(50% + 1 * var(--kachelbreite) + 1.5 * var(--kachelabstand));    
}




/*       1   2     */
/* 10            3 */
/*  9            4 */
/*  8            5 */
/*       7   6     */

.Offen .Thema {
    min-width: 5em;
    height: 2.3em;
    transition-property: min-width, height, top, left, transform;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}


/*..*/

.Offen .Thema.Reihe1.Spalte2{
    top: 0%;
    left: 33%;
    transform: translate(-50%, -75%);
}

.Offen .Thema.Reihe1.Spalte3{
    top: 0%;
    left: 67%;
    transform: translate(-50%, -75%);
}

.Offen .Thema.Reihe1.Spalte4{
    left: 100%;
    top: 25%;
    transform: translate(-20%, -50%);
}

.Offen .Thema.Reihe2.Spalte4{
    left: 100%;
    top: 50%;
    transform: translate(-20%, -50%);
}

.Offen .Thema.Reihe3.Spalte4{
    left: 100%;
    top: 75%;
    transform: translate(-20%, -50%);
}

.Offen .Thema.Reihe3.Spalte3{
    top: 100%;
    left: 67%;
    transform: translate(-50%, -25%);
}

.Offen .Thema.Reihe3.Spalte2{
    top: 100%;
    left: 33%;
    transform: translate(-50%, -25%);
}

.Offen .Thema.Reihe3.Spalte1{
    left: 0%;
    top: 75%;
    transform: translate(-80%, -50%);
}

.Offen .Thema.Reihe2.Spalte1{
    left: 0%;
    top: 50%;
    transform: translate(-80%, -50%);
}

.Offen .Thema.Reihe1.Spalte1{
    left: 0%;
    top: 25%;
    transform: translate(-80%, -50%);
}

#Infodisplay.Initial>#Default {
    display: block;
    overflow: auto;
    width: calc(2*var(--kachelbreite) + var(--kachelabstand));
    height: var(--kachelhoehe);
}



.Thema:hover{
    background-color: #0d8cbe;
    text-decoration: none;
}


.Text {
    display: none;
}

.Text.Aktiv
{
    display: block;
    overflow: auto;
    height: 100%;
}

.Thema.Aktiv { 
    background-color: #0d8cbe;
    box-shadow: 0 0 5px black;
}

.KontaktAufruf {
    display: block;
    width: fit-content;
    background-color: transparent;
    padding: 0.6em 1.2em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    border: 2px solid #ff8C00;
	border-radius: 5px;
    cursor: pointer;
    color: #ff8C00 !important;
    transition: background-color 0.5s, color 0.5s;
}
.KontaktAufruf:hover {
    text-decoration: none;
    background-color: #ff8C00;
	color: white !important;
}
.KontaktAufruf:visited {
    color: #ff8C00;
}

.Besucht::after { 
    content: '✔';
    margin-left: 1ch;
    color: white;
  }



.Initial>#Infodisplay>#Default {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Default h2 {
    color: #ff8C00;
    white-space: nowrap;
    font-size: 3em;
    margin-top: 0;
}

.TheOne {
    font-family: Arial;
    font-weight: bold;
    font-style: italic;
    color: #181870;
    font-size: inherit;
}

.Zitatsammlung {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: left;
    gap: 1em;
}
.Zitat {
    border: 1px solid lightgrey;
    background-color: white;
    border-radius: 15px 15px 15px 0;
    max-width: 80%;
    padding:  0.5em 1.5em;
}

.Zitat:nth-child(even) {
    border-radius: 15px 15px 0 15px;
    align-self: flex-end;
}

#Infodisplay ul { /* Warum in armbrust.css "inside" ??? */
    list-style-position: outside;
} 

#Infodisplay a[target="_blank"]::after {
    content: ' ↗';
    font-size: 0.9em;
    margin-left: 0px;
  }

/* Scrollbar */
.Text::-webkit-scrollbar {
    width: 5px;
}
  
/* Track */
.Text::-webkit-scrollbar-track {
    background: white;
}
   
/* Handle */
.Text::-webkit-scrollbar-thumb {
    background: #9b9b9b;
    border-radius: 3px;  
}
  
/* Handle on hover */
.Text::-webkit-scrollbar-thumb:hover {
    background: #bbb; 
}

.Infotabelle th {
    border: none;
    color: #ff8C00;
    text-wrap: nowrap;
}

.Infotabelle tr:nth-child(odd) {
    background-color: white;
}

.Infotabelle tr:nth-child(even) {
    background-color: #fdf1e8;
}

.Infotabelle td {
    padding: 0.5em;
}

.spalten {
    display: flex;
    align-items: flex-start;
}

.Text .image-wrapper {
    float: right;
    margin-top: -5em;
    margin-right: 15px;
    width: 100px;
  }
  
  .Text .image-wrapper img {
    max-width: 100%; /* Bild bleibt innerhalb der Breite des Containers */
    height: auto; /* Bewahrt das Seitenverhältnis */
  }

@media (max-width: 880px) {
    article {
        margin-top: 12px;
    }
        .Text, .Thema {
        width: 100% !important;
        max-width: unset;
        position: relative;
        transform: none;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    .Thema {
        margin-top: 0.3em;
    }

    .Thema.Aktiv {
        box-shadow: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .Text.Aktiv {
        border-left: 1px solid lightgrey;
        border-right: 1px solid lightgrey;
        border-bottom: 1px solid lightgrey;
        padding: 0 0.5em;
    }
    
    #Container, .Text.Aktiv, .Thema {
        height: auto !important;
    }

    #Container::before {
        content: "";
    }

    #Container * {
        max-width: 100%;
    }
    #Infodisplay {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0.5em;
    }

    #Default {
        top: 0 !important;
        left: 0 !important;
        position: relative !important;
        display: block !important;
    }
    .Zitat {
        border-radius: 8px;
        padding:  0.5em 0.5em;
    }
    .Zitat:nth-child(even) {
        border-radius: 8px;
    }
       

}