/* GLOBALES CSS */
body { font-family: sans-serif; background: #1a1a1a; color: #fff; margin: 0; padding: 0; }

/* Header & Navigation */
.header-container { 
	position: relative; display: flex; justify-content: center; align-items: center; 
	background: #222; padding: 15px 20px; border-bottom: 2px solid #333; 
	margin-bottom: 20px;
}
nav { display: flex; gap: 15px; }
nav button { 
	color: #fff; padding: 10px 20px; font-size: 16px; border: 1px solid #555; 
	background: #333; border-radius: 4px; cursor: pointer; transition: 0.3s;
}
nav button.active { background: #f39c12; color: black; font-weight: bold; border-color: #f39c12; }
nav button:hover { background: #444; border-color: #f39c12; }

/* Language Switcher */
.language-switcher { position: absolute; right: 20px; display: flex; gap: 10px; align-items: center; }
.lang-flag { 
	width: 35px; height: 22px; cursor: pointer; object-fit: cover; 
	border: 2px solid transparent; border-radius: 3px; transition: 0.2s; opacity: 0.5; 
}
.lang-flag:hover { opacity: 1; transform: scale(1.1); }
.lang-flag.active { border-color: #f39c12; opacity: 1; box-shadow: 0 0 8px #f39c12; }

/* Inhalt */
.content { max-width: 800px; margin: 40px auto; padding: 20px; }
.disclaimer { 
	background: #2a2a2a; border-left: 4px solid #f39c12; padding: 15px; 
	margin-bottom: 30px; font-style: italic; border-radius: 4px;
}
.faq-item { margin-bottom: 25px; border-bottom: 1px solid #333; padding-bottom: 15px; }
.faq-item h3 { color: #f39c12; margin-bottom: 10px; }
.faq-item p { line-height: 1.6; color: #ccc; }

/* Footer Bereich */
.site-footer {
	text-align: center;
	padding: 20px;
	margin-top: 40px;
	border-top: 1px solid #333;
	font-size: 14px;
	color: #aaa;
	background: #1a1a1a;
}
.site-footer p { margin: 5px 0; }
.site-footer .footer-links a {
	color: #f39c12;
	text-decoration: none;
	margin: 0 10px;
}
.site-footer .footer-links a:hover {
	text-decoration: underline;
	color: #e67e22;
}

/* Hauptcontainer - Design-Update */
details.faq-category {
    background: #222;
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 0 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

details.faq-category[open] {
    border-color: #f39c12;
    background: #252525;
}

/* Der Klick-Bereich */
details.faq-category summary {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    padding: 20px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}

details.faq-category summary:hover {
    color: #f39c12;
}

/* Der Plus/Minus-Effekt */
details.faq-category summary::after {
    content: "+";
    color: #f39c12;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.4s ease;
}

details.faq-category[open] summary::after {
    transform: rotate(45deg); /* Plus wird zum X oder schrägen Strich */
}

/* Animations-Container */
details.faq-category .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
}

details.faq-category[open] .faq-content {
    grid-template-rows: 1fr;
}

details.faq-category .faq-content > div {
    overflow: hidden;
    padding-bottom: 20px;
}

.logo-container {
    display: flex;           /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert horizontal */
    align-items: center;     /* Zentriert vertikal (optional) */
    width: 100%;             /* Stellt sicher, dass das Div die volle Breite einnimmt */
    padding: 20px 0;         /* Abstand nach oben und unten */
}

.logo-container img {
    width: 820px;
    height: 250px;
    /* Kein "margin: 0 auto" mehr nötig bei Flexbox */
}