/* ==========================================================================
   VARIABLEN
   ========================================================================== */
:root {
    /* CD-Farben */
    --farbe-petrol: 0, 48, 58; 
    --farbe-creme: 245, 240, 235;
    --farbe-weiss: 250, 250, 250;
    --farbe-tuerkis: 62, 131, 140;
    --farbe-tuerkis-15: 226, 236, 238;
    --farbe-koralle: 230, 140, 120;
    --farbe-altrosa: 179, 106, 95;
    --farbe-altrosa-15: 244, 233, 231;
    
    /* Abstände */
    --abstand-xs: 0.5rem;
    --abstand-sm: 1rem;
    --abstand-md: 1.5rem;
    --abstand-lg: 2.5rem;
    --abstand-xl: 5rem;
}

/* ==========================================================================
   GRUNDEINSTELLUNGEN
   ========================================================================== */
   
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    background-color: RGB(var(--farbe-creme));
    color: RGB(var(--farbe-petrol));
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.125rem); 
    line-height: 1.6;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   KLASSEN: FARBEN, SCHATTEN, BORDER, PADDING
   ========================================================================== */

.bg-petrol { background-color: RGB(var(--farbe-petrol)); }
.bg-creme { background-color: RGB(var(--farbe-creme)); }
.bg-weiss { background-color: RGB(var(--farbe-weiss)); }
.bg-tuerkis { background-color: RGB(var(--farbe-tuerkis)); }
.bg-koralle { background-color: RGB(var(--farbe-koralle)); }
.bg-altrosa { background-color: RGB(var(--farbe-altrosa)); }
.bg-koralle-10 { background-color: rgba(var(--farbe-koralle), 0.1); }
.bg-altrosa-10 { background-color: rgba(var(--farbe-altrosa), 0.1); }
.bg-split-creme-koralle { min-height: 100vh; background: linear-gradient(to right, RGB(var(--farbe-creme)) 58%, RGB(var(--farbe-koralle)) 42%); }
.bg-split-creme-koralle-2 { background: linear-gradient(to right, RGB(var(--farbe-creme)) 58%, RGB(var(--farbe-koralle)) 42%); }


.text-petrol { color: RGB(var(--farbe-petrol)); }
.text-creme { color: RGB(var(--farbe-creme)); }
.bg-tuerkis * { color: RGB(var(--farbe-creme)); }
.bg-petrol * { color: RGB(var(--farbe-creme)); }
.text-weiss { color: RGB(var(--farbe-weiss)); }
.text-tuerkis { color: RGB(var(--farbe-tuerkis)); }
.text-koralle { color: RGB(var(--farbe-koralle)); }
.text-altrosa { color: RGB(var(--farbe-altrosa)); }

.schatten-petrol { box-shadow: var(--abstand-sm) var(--abstand-sm) 0px RGB(var(--farbe-petrol)); }
.schatten-petrol-negativ { box-shadow: calc(var(--abstand-sm) * -1) calc(var(--abstand-sm) * -1) 0px RGB(var(--farbe-petrol)); }
.schatten-tuerkis { box-shadow: var(--abstand-sm) var(--abstand-sm) 0px RGB(var(--farbe-tuerkis)); }
.schatten-koralle { box-shadow: var(--abstand-sm) var(--abstand-sm) 0px RGB(var(--farbe-koralle)); }

.border-petrol { border: 0.25rem solid RGB(var(--farbe-petrol)); }
.border-koralle { border: 0.25rem solid RGB(var(--farbe-koralle)); }
.border-links-petrol { border-left: var(--abstand-xs) solid RGB(var(--farbe-petrol)); }
.border-links-tuerkis { border-left: var(--abstand-xs) solid RGB(var(--farbe-tuerkis)); }

.padding-md { padding: var(--abstand-md); }
.padding-lg { padding: var(--abstand-lg); }
@media (max-width: 30rem){
    .padding-lg { padding: var(--abstand-md); }
}
.padding-xl { padding: var(--abstand-xl); }
@media (max-width: 56.25rem){
    .padding-xl { padding: var(--abstand-lg); }
}

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */

h1 { 
    font-size: clamp(2rem, 5vw, 4rem); 
    font-weight: 500; 
    margin-bottom: var(--abstand-xs); 
}

h1.major {
	font-size: clamp(3rem, 7vw, 6rem);
}

h2 { 
    font-size: clamp(1.7rem, 4vw, 3.3rem); 
    font-weight: 600; 
    margin-bottom: var(--abstand-xs); 
}

h3 { 
    font-size: clamp(1.4rem, 2vw, 1.8rem); 
    font-weight: 600; 
    margin-bottom: var(--abstand-xs); 
}

caption { 
    font-size: clamp(1.4rem, 2vw, 1.8rem); 
    font-weight: 600; 
    margin-bottom: var(--abstand-xs); 
    text-align: left; 
}

h4, dt { 
    font-size: clamp(1.2rem, 1.5vw, 1.4rem); 
    font-weight: 600; 
    margin-bottom: var(--abstand-md); 
}

h1, h2, h3, h4, caption, dt { 
    line-height: 1.1; 
}

h5 { 
    font-size: clamp(1.1rem, 1.2vw, 1.125rem); 
    font-weight: 600; 
    margin-bottom: var(--abstand-sm); 
}

p, dd { 
    margin-bottom: var(--abstand-sm); 
}

figcaption { 
    margin: var(--abstand-sm) 0; 
}

.text-rechts { 
    text-align: right; 
}

.uppercase-bold { 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.2rem; 
    margin-bottom: var(--abstand-xs); 
}

.big { 
    font-size: clamp(1.2rem, 1.5vw, 1.4rem); 
}

.bold { 
    font-weight: 600; 
    letter-spacing: 0.05rem; 
}

a {
    text-decoration: none;
    cursor: pointer;
    color: RGB(var(--farbe-tuerkis));
}

a:hover {
    font-weight: 600;
    color: RGB(var(--farbe-koralle));
}

main a:not(.button):not(.icon-button a)::after {
    content: " ⧉";
}

.abschnitts-nummer {
    font-size: clamp(6rem, 15vw, 10rem); 
    font-weight: 800;
    line-height: 0.75;
    opacity: 0.35;
    margin-bottom: var(--abstand-xs);
}

address{
    font-style: normal;
}

@media (max-width: 30rem) {
    p:not(.big){
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
}

/* ==========================================================================
   ANSTRICHE
   ========================================================================== */

ul { 
    list-style-type: none; 
    margin-bottom: var(--abstand-sm); 
}

main ul:not(.list-none) li:not(.label) { 
    position: relative; 
    padding-left: var(--abstand-sm); 
    margin-bottom: var(--abstand-xs); 
}

@media (max-width: 30rem){
    main ul:not(.list-none) li:not(.label) { 
        padding-left: var(--abstand-md); 
    }
}

main ul:not(.list-none) li:not(.label)::before { 
    content: '■'; 
    position: absolute; 
    left: 0; 
    color: RGB(var(--farbe-tuerkis)); 
}

main ol {
    padding-left: var(--abstand-md);
}

/* ==========================================================================
   TABELLE
   ========================================================================== */

table { 
    width: 100%; border-collapse: collapse; 
}

table td { 
    padding: var(--abstand-xs); 
    border-bottom: 0.05rem solid rgba(var(--farbe-petrol), 0.25); 
    vertical-align: top;
}

table th { 
    font-weight: 600; 
    padding: var(--abstand-xs); 
    border-bottom: 0.15rem solid RGB(var(--farbe-petrol)); 
    vertical-align: top;
}

.table-container {
    max-width: 100%;
    overflow: auto; 
}

/* ==========================================================================
   BUTTONS & LABELS
   ========================================================================== */

.button {
    margin-top: var(--abstand-lg);
    display: inline-block;
    padding: var(--abstand-sm) var(--abstand-md);
    background-color: RGB(var(--farbe-petrol));
    color: RGB(var(--farbe-weiss));
    font-weight: 600;
}

.button:hover {
    background-color: RGB(var(--farbe-altrosa));
    color: RGB(var(--farbe-weiss));
}

.icon-button {
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: var(--abstand-sm);
    background-color: RGB(var(--farbe-tuerkis));
    cursor: pointer;
    overflow: hidden;
}

.icon-button svg, svg.xscroll-icon { 
    width: 1.5rem; 
    height: 1.5rem; 
    fill: RGB(var(--farbe-weiss)); 
}

@media (min-width: 30rem){
    .icon-button a { 
        white-space: nowrap; 
        width: 0; 
        opacity: 0;
        color: RGB(var(--farbe-weiss)); 
        font-weight: 500; 
        display: block; 
    }
}

.icon-button:hover { 
    width: auto; 
    background-color: RGB(var(--farbe-koralle)); 
}

.icon-button:hover a { 
    width: auto; 
    opacity: 1;
    margin-left: var(--abstand-xs); 
}

@media (max-width: 30rem){
    .icon-button a { 
        margin-left: var(--abstand-xs); 
        color: RGB(var(--farbe-weiss)); 
        font-weight: 500; 
        display: block; 
    }
}

.label {
    padding: var(--abstand-xs) var(--abstand-sm);
    border: 0.15rem solid RGB(var(--farbe-weiss));
}

.label:hover {
    background-color: RGB(var(--farbe-weiss));
    color: RGB(var(--farbe-tuerkis));
}

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

.menu-toggle {
    position: fixed;
    top: var(--abstand-md);
    right: var(--abstand-sm);
    z-index: 20;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.menu-toggle span {
    width: 1.875rem;
    height: 0.1875rem;
    background-color: RGB(var(--farbe-petrol));
}

.overlay-nav {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background-color: rgba(var(--farbe-petrol), 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 15;
    opacity: 0;
    visibility: hidden;
}

.overlay-nav.active {
    opacity: 1;
    visibility: visible;
}

.overlay-nav a {
    font-size: clamp(1.4rem, 2vw, 1.8rem); 
    color: RGB(var(--farbe-weiss));
}

.overlay-nav .submenu a {
    font-size: clamp(1rem, 1.2vw, 1.125rem); 
}

.overlay-nav li{
    padding-top: var(--abstand-xs);
}

/* Burger Animation zu 'X' */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(0.5625rem) rotate(45deg);
    background-color: RGB(var(--farbe-weiss));
}
.menu-toggle.active span:nth-child(2) { 
    opacity: 0; 
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-0.5625rem) rotate(-45deg);
    background-color: RGB(var(--farbe-weiss));
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

.menu-toggle span, .overlay-nav, a:hover, .button:hover, .label:hover, .tab-reiter:hover{
    transition: all 0.5s ease;
}

/* ==========================================================================
   MEDIEN
   ========================================================================== */

img, picture, svg, video, canvas {
    width: 100%;
    display: block; 
    height: auto;
}

.logo{
    max-width: 10rem;
}

@media (max-width: 30rem) {
    .logo{
        max-width: 5rem;
    }
}

/* ==========================================================================
   TRENNLINIE
   ========================================================================== */

hr { 
    color: RGB(var(--farbe-petrol)); 
    margin: var(--abstand-sm) 0; 
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
    width: 90%;
    max-width: 75rem; 
    margin: 0 auto;
    padding: var(--abstand-xl) 0;
}

.container-small{
    width: 90%;
    max-width: 56.25rem;
    margin: 0 auto;
    padding: var(--abstand-xl) 0;
}

.container-big{
    width: 90%;
    max-width: 100rem;
    margin: 0 auto;
    padding: var(--abstand-xl) 0;
}

/* ==========================================================================
   RASTER
   ========================================================================== */

.grid-repeat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--abstand-md);
}

@media (max-width: 56.25rem) {
    .grid-repeat {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }
}

.flex-center-titel { 
    display: flex; 
    align-items: center; 
    gap: var(--abstand-md); 
    padding-bottom: var(--abstand-lg); 
}

.flex-space {
    display: flex;
    justify-content: space-between;
    gap: var(--abstand-sm);
}

.flex-space-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}

@media (max-width: 56.25rem) {
    .flex-space-end {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--abstand-md);
    }
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-sm);
}

@media (max-width: 30rem) {
    .flex-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

.flex-wrap-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--abstand-sm);
}

/* ==========================================================================
   2-SPALTEN ÜBERLAPPEND
   ========================================================================== */

.flex-center {
    display: flex;
    align-items: center;
	gap: var(--abstand-sm); 
}

.spalte-ueberlappend-links { 
    flex: 1;
    margin-left: calc(var(--abstand-xl) * -1); 
    z-index: 2;
}
.spalte-ueberlappend-rechts { 
    flex: 1;
    margin-right: calc(var(--abstand-xl) * -1); 
    z-index: 2;
}

.spalte-ueberlappt {
    flex: 1.2;
}

@media (max-width: 56.25rem) {
    .flex-center { 
        flex-direction: column; 
        align-items: stretch;
		gap: 0; 
    }
    .spalte-ueberlappend-links, .spalte-ueberlappend-rechts { 
        margin-left: 0; 
        margin-right: 0;
    }
}

/* ==========================================================================
   SLIDER
   ========================================================================== */

.slider {
    display: flex;
    gap: var(--abstand-lg);
    padding: var(--abstand-md) var(--abstand-sm) var(--abstand-lg) 0; 
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-color: RGB(var(--farbe-tuerkis)) RGB(var(--farbe-tuerkis-15));
    -webkit-overflow-scrolling: touch;
    box-shadow: inset 0 calc(var(--abstand-sm) * -1) 0 0 RGB(var(--farbe-tuerkis-15));
}
@media (max-width: 30rem){
    .slider{
        box-shadow: inset 0 calc(var(--abstand-xs) * -1) 0 0 RGB(var(--farbe-tuerkis-15));
    }
}

.slider > * {
    flex: 0 0 30rem;
    max-width: 100%;
    scroll-snap-align: start;
}

@media (min-width: 30rem) {
    .slider .xscroll-icon{
        display: none;
    }    
}

/* ==========================================================================
   3-TAB-MODUL
   ========================================================================== */

.tab-navigation { 
    display: flex; 
    flex-wrap: wrap; 
    gap: var(--abstand-xs); 
    margin: var(--abstand-lg) 0 var(--abstand-md) 0; 
}

.tab-reiter { 
    padding: var(--abstand-xs) var(--abstand-sm); 
    background-color: RGB(var(--farbe-weiss)); 
    color: RGB(var(--farbe-petrol));
    border: 0.15rem solid RGB(var(--farbe-petrol)); 
    cursor: pointer; 
    font-weight: 600; 
}

.tab-reiter:hover { 
    background-color: RGB(var(--farbe-tuerkis))!important; 
    color: RGB(var(--farbe-weiss))!important; 
}

.tab-inhaltsbereich { 
    background-color: RGB(var(--farbe-weiss)); 
    border: 0.15rem solid RGB(var(--farbe-petrol)); 
    padding: var(--abstand-lg); 
}

@media (max-width: 30rem){
    .tab-inhaltsbereich { 
        padding: var(--abstand-md); 
    }
}

#Threetab1 {
    background-color: RGB(var(--farbe-petrol)); 
    color: RGB(var(--farbe-weiss)); 
}

#Threetab1Content {
    display: block; 
}

#Threetab2Content {
    display: none; 
}

#Threetab3Content {
    display: none; 
}

/* ==========================================================================
   ACCORDION (Details/Summary)
   ========================================================================== */

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-sm);
}

summary {
    padding: var(--abstand-lg);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

summary *, summary::after { 
    font-size: clamp(1.4rem, 2vw, 1.8rem); 
    font-weight: 600; 
    margin-bottom: 0; 
}

summary::after {
    content: '+';
}

details[open] summary::after {
    content: '−';
}

summary::-webkit-details-marker {
    display: none;
}

summary ~ *{
    border-top: var(--abstand-xs) solid rgba(var(--farbe-altrosa), 0.1);
}

.accordion-content {
    padding: var(--abstand-lg);
}

@media (max-width: 30rem){
    summary {
        padding: var(--abstand-md);
    }
    .accordion-content {
        padding: var(--abstand-md);
    }
}

.accordion-container figure img{
    box-shadow: 0 0 15px rgba(var(--farbe-petrol), 0.1);
}

.accordion-container figure{
    flex: 1;
    min-width: 300px;
}

@media (max-width: 30rem){
    .accordion-container figure{
        min-width: 100%;
    }
}

.accordion-container figure:hover {
    flex-grow: 3;
    font-weight: 600;
}

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

#menu-footer {
    border-top: 0.25rem solid rgba(var(--farbe-weiss), 0.25);
    padding: var(--abstand-md);
    margin-bottom: 0;
    text-align: center;
}