diff --git a/Minecraft-Modern-Theme/style.css b/Minecraft-Modern-Theme/style.css
index bca235a..9299be5 100644
--- a/Minecraft-Modern-Theme/style.css
+++ b/Minecraft-Modern-Theme/style.css
@@ -1,1021 +1,1285 @@
-/*
-Theme Name: Minecraft Modern Theme
-Theme URI: https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme
-Author: M_Viper
-Description: Ein modernes Gaming-Theme mit konfigurierbarem Header-Slider.
-Author URI: https://M-Viper.de
-Version: 1.5
-License: GNU General Public License v2 or later
-License URI: http://www.gnu.org/licenses/gpl-2.0.html
-Text Domain: minecraft-modern-theme
-*/
-
-@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');
-
-/* === DARK / LIGHT MODE VARIABLEN === */
-:root {
- --bg-color: #14151a;
- --surface-color: #1e2029;
- --card-bg: #252830;
- --text-color: #e4e4e4;
- --text-muted: #a0a0a0;
- --primary-accent: #00d4ff;
- --header-bg: rgba(20, 21, 26, 0.8);
- --header-scrolled-bg: #14151a;
- --border-color: #333;
- --header-height: 500px;
-}
-
-html.light-mode {
- --bg-color: #f8f9fa;
- --surface-color: #ffffff;
- --card-bg: #ffffff;
- --text-color: #212529;
- --text-muted: #6c757d;
- --header-bg: rgba(255, 255, 255, 0.95);
- --header-scrolled-bg: #ffffff;
- --border-color: #dee2e6;
-}
-
-/* Sanfte Übergänge */
-body, .site-header, .site-footer, .post, .faq-item, .theme-toggle {
- transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
-}
-
-/* === ALLGEMEINE STYLES & STICKY FOOTER SETUP === */
-body {
- font-family: 'Raleway', sans-serif;
- background-color: var(--bg-color);
- color: var(--text-color);
- margin: 0;
- line-height: 1.7;
-}
-
-/* WICHTIG: Dies sind die Regeln, die den Footer immer unten halten */
-html { height: 100%; }
-body {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
-}
-.site-main {
- flex: 1; /* Sorgt dafür, dass der Hauptinhalt den verfügbaren Platz ausfüllt */
-}
-
-h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--text-color); }
-
-a { color: var(--primary-accent); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
-a:hover { color: #fff; }
-
-.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
-
-/* === HEADER & NAVIGATION === */
-.site-header {
- background-color: var(--header-bg);
- backdrop-filter: blur(10px);
- padding: 30px 0; /* FIX: Mehr vertikaler Platz im Header */
- position: sticky;
- top: 0;
- z-index: 1000;
- transition: background-color 0.3s ease, box-shadow 0.3s ease;
-}
-.site-header.scrolled {
- background-color: var(--header-scrolled-bg);
- box-shadow: 0 2px 15px rgba(0,0,0,0.3);
-}
-
-.header-main {
- display: flex;
- align-items: center;
- justify-content: space-between; /* FIX: Logo Links, Menü Mitte, Info Rechts */
- gap: 40px; /* Flexiblerer Abstand */
-}
-
-/* WICHTIG: Typo im Header.html korrigieren!
- HTML:
- CSS: .site-branding
- Sie müssen die 'g' im HTML oder CSS angleichen, sonst ist das Layout kaputt.
-*/
-.site-branding {
- display: flex;
- align-items: center;
-}
-
-.custom-logo-link img, .custom-logo {
- max-height: 60px;
- margin-right: 15px;
- width: auto;
-}
-
-.site-branding h1, .site-title {
- margin: 0;
- font-size: 24px;
- font-weight: 700;
-}
-
-.site-branding a {
- color: var(--text-color);
- text-decoration: none;
-}
-
-/* =================================================================== */
-/* === NEUE DROPDOWN NAVIGATION ======================================= */
-/* =================================================================== */
-
-#site-navigation {
- position: relative;
- flex-grow: 1; /* FIX: Navigation nimmt den gesamten Platz in der Mitte ein */
- display: flex;
- justify-content: center; /* Zentriert das Menü innerhalb seines Raums */
- align-items: center;
- padding: 0 30px; /* Mindestabstand zu Logo und Socials */
-}
-
-/* Hauptliste (Top Level) */
-.primary-menu {
- display: flex;
- align-items: center;
- list-style: none;
- margin: 0;
- padding: 0;
- gap: 20px; /* Abstand zwischen Menüpunkten horizontal */
-}
-
-/* Menüpunkte */
-.menu-item {
- position: relative;
-}
-
-/* Links in der Navigation */
-.main-navigation a {
- display: inline-block;
- font-size: 15px;
- font-weight: 600;
- color: var(--text-muted);
- text-decoration: none;
- padding: 20px 0; /* FIX: Mehr vertikaler Platz (Oben/Unten) ohne horizontales Padding */
- transition: color 0.3s ease;
- position: relative;
-}
-
-.main-navigation a:hover {
- color: var(--primary-accent);
-}
-
-/* Pfeil-Icon für Untermenü-Punkte (Desktop) */
-.menu-item-has-children > a::after {
- content: '\f107'; /* FontAwesome Down Arrow */
- font-family: 'Font Awesome 6 Free';
- font-weight: 900;
- margin-left: 8px;
- font-size: 0.8em;
- display: inline-block;
- transition: transform 0.3s ease;
-}
-
-/* Pfeil drehen beim Hover */
-.menu-item-has-children:hover > a::after {
- transform: rotate(180deg);
-}
-
-/* --- DROPDOWNS (Untermenüs Level 1) --- */
-.sub-menu {
- position: absolute;
- top: 100%; /* Direkt unter dem Elternpunkt */
- left: 0;
- background-color: var(--surface-color);
- border: 1px solid var(--border-color);
- border-top: 3px solid var(--primary-accent);
- min-width: 240px;
- list-style: none;
- padding: 10px 0;
- margin: 0;
- z-index: 9999;
-
- /* Animationseinstellungen */
- opacity: 0;
- visibility: hidden;
- transform: translateY(20px);
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 10px 30px rgba(0,0,0,0.5);
- border-radius: 0 0 8px 8px;
-}
-
-/* Dropdown anzeigen bei Hover */
-.menu-item-has-children:hover > .sub-menu {
- opacity: 1;
- visibility: visible;
- transform: translateY(10px);
-}
-
-/* Links im Dropdown */
-.sub-menu li a {
- padding: 12px 25px;
- color: var(--text-color);
- border-bottom: 1px solid rgba(255,255,255,0.05);
- font-size: 14px;
- white-space: nowrap;
-
- /* FIX: Vollständige Hintergrund-Markierung */
- display: block;
- width: 100%;
- box-sizing: border-box; /* Padding wird zur Breite hinzugezählt */
- transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
-}
-
-.sub-menu li:last-child a {
- border-bottom: none;
-}
-
-.sub-menu li a:hover {
- background-color: rgba(0, 212, 255, 0.1);
- color: var(--primary-accent);
- padding-left: 30px; /* Schiebe-Effekt */
-}
-
-/* --- DROPDOWN LEVEL 2 (falls vorhanden) --- */
-.sub-menu .sub-menu {
- top: 0;
- left: 100%; /* Rechts neben dem Elternmenü */
- margin-top: -3px;
-}
-.sub-menu li:hover > .sub-menu {
- opacity: 1;
- visibility: visible;
- transform: translateX(10px);
-}
-
-/* Pfeil für Level 2 nach rechts zeigen */
-.sub-menu .menu-item-has-children > a::after {
- content: '\f105'; /* FontAwesome Right Arrow */
- float: right;
- margin-left: 0;
- margin-top: 4px;
-}
-
-/* --- MOBILE TOGGLE BUTTON --- */
-.menu-toggle {
- display: none; /* Auf Desktop ausblenden */
- background: transparent;
- border: none;
- color: var(--text-color);
- font-size: 24px;
- cursor: pointer;
- padding: 5px;
- transition: color 0.3s ease;
-}
-.menu-toggle:hover {
- color: var(--primary-accent);
-}
-
-/* --- HEADER INFO & SOCIAL LINKS --- */
-.header-info {
- display: flex;
- align-items: center;
- gap: 20px;
-}
-
-.social-links {
- display: flex;
- gap: 15px;
-}
-
-.social-links a {
- font-size: 18px;
- color: var(--text-muted);
- transition: color 0.2s ease;
-}
-.social-links a:hover {
- color: var(--primary-accent);
-}
-
-/* === HERO / SLIDER === */
-.hero-slider {
- width: 100%;
- height: var(--header-height);
- position: relative;
-}
-
-.swiper-slide {
- background-size: cover;
- background-position: center;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.swiper-slide::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.4);
- z-index: 1;
-}
-
-.slider-content {
- text-align: center;
- color: #fff;
- z-index: 2;
- padding: 20px;
-}
-.slider-title {
- font-size: 48px;
- font-weight: 700;
- margin-bottom: 20px;
- text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
-}
-.slider-subtitle {
- font-size: 20px;
- font-weight: 400;
-}
-
-.swiper-pagination-bullet { background: #fff; opacity: 0.5; }
-.swiper-pagination-bullet-active { background: var(--primary-accent); opacity: 1; }
-
-.swiper-button-prev, .swiper-button-next {
- color: #fff;
- background: rgba(0,0,0,0.3);
- width: 44px;
- height: 44px;
- border-radius: 50%;
- transition: background 0.2s ease;
-}
-.swiper-button-prev:hover, .swiper-button-next:hover { background: rgba(0,0,0,0.6); }
-.swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; }
-
-/* === Hauptinhalt & Karten-Layout === */
-.site-main { padding: 80px 0; }
-
-.content-area {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
- gap: 30px;
-}
-
-.post, .page-content {
- background-color: var(--card-bg);
- border-radius: 8px;
- overflow: hidden;
- border: 1px solid var(--border-color);
- transition: transform 0.3s ease, border-color 0.3s ease;
-}
-.post:hover, .page-content:hover {
- transform: translateY(-5px);
- border-color: var(--primary-accent);
- box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
-}
-
-.post-content, .page-content-inner { padding: 25px; }
-.post-title, .page-title {
- font-size: 20px;
- margin-top: 0;
- margin-bottom: 10px;
-}
-.post-title a, .page-title a {
- color: var(--text-color);
-}
-.post-title a:hover, .page-title a:hover {
- color: var(--primary-accent);
-}
-
-/* === FOOTER (NEUES DESIGN) ========================================== */
-
-.site-footer {
- background-color: var(--surface-color);
- border-top: 4px solid var(--primary-accent);
- padding: 60px 0 0 0;
- margin-top: 0;
- position: relative;
- flex-shrink: 0;
-}
-
-/* Widget Grid Layout */
-.footer-widgets {
- display: grid;
- /* Responsive Grid: Mindestens 250px breit, füllt den Rest auf */
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: 40px;
- margin-bottom: 50px;
-}
-
-/* Widget Überschriften */
-.footer-widget .widget-title {
- font-size: 16px;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: var(--primary-accent);
- margin-bottom: 20px;
- padding-bottom: 10px;
- border-bottom: 2px solid rgba(255,255,255,0.1);
- display: inline-block;
-}
-
-/* Listen in Widgets */
-.footer-widget ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.footer-widget ul li {
- margin-bottom: 12px;
-}
-
-.footer-widget ul li a {
- color: var(--text-muted);
- text-decoration: none;
- font-size: 14px;
- transition: all 0.3s ease;
- display: inline-block;
- border-left: 2px solid transparent;
- padding-left: 10px;
-}
-
-.footer-widget ul li a:hover {
- color: #fff;
- border-left-color: var(--primary-accent);
- padding-left: 15px; /* Schiebe-Effekt */
-}
-
-/* === FOOTER BOTTOM BAR ============================================= */
-
-.footer-bottom-bar {
- border-top: 1px solid var(--border-color);
- padding: 25px 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: 20px;
- font-size: 13px;
-}
-
-.footer-left-group {
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-
-.footer-right-group {
- display: flex;
- align-items: center;
-}
-
-/* Site Info & Credit */
-.site-info {
- color: var(--text-muted);
- margin: 0;
-}
-
-.footer-credit a {
- color: var(--text-muted);
- transition: color 0.2s;
-}
-.footer-credit a:hover {
- color: var(--primary-accent);
-}
-
-/* Footer Navigation (Menü unten) */
-.footer-navigation {
- display: flex;
- gap: 20px;
-}
-
-.footer-menu {
- list-style: none;
- margin: 0;
- padding: 0;
- display: flex;
- gap: 15px;
-}
-
-.footer-menu a {
- color: var(--text-muted);
- text-decoration: none;
- font-size: 13px;
- transition: color 0.2s;
-}
-.footer-menu a:hover {
- color: #fff;
- text-decoration: underline;
-}
-
-/* Legal Links */
-.footer-legal-links {
- display: flex;
- gap: 20px;
-}
-
-.footer-legal-links a {
- color: var(--text-muted);
- text-decoration: none;
- display: flex;
- align-items: center;
- gap: 5px;
- transition: color 0.2s;
-}
-.footer-legal-links a:hover {
- color: var(--primary-accent);
-}
-.footer-legal-links i {
- font-size: 14px;
-}
-
-/* === THEME TOGGLE (Fixiert unten links) ========================= */
-
-.theme-toggle {
- position: fixed; /* Schwebend über dem Inhalt */
- left: 30px; /* <== WIEDER LINKS */
- bottom: 30px;
- z-index: 9999;
- width: 70px;
- height: 36px;
- background: var(--card-bg);
- border: 2px solid var(--border-color);
- border-radius: 30px;
- cursor: pointer;
- display: flex;
- align-items: center;
- padding: 3px;
- box-shadow: 0 4px 20px rgba(0,0,0,0.4);
- backdrop-filter: blur(10px);
- transition: all 0.3s ease;
- outline: none;
-}
-
-.theme-toggle:hover {
- border-color: var(--primary-accent);
- box-shadow: 0 0 25px rgba(0,212,255,0.5);
-}
-
-/* Light Mode Anpassung für den Toggle */
-html.light-mode .theme-toggle {
- box-shadow: 0 4px 20px rgba(0,0,0,0.15);
- background: #fff;
-}
-
-/* Der bewegliche Punkt im Toggle */
-.theme-toggle::before {
- content: '';
- position: absolute;
- width: 28px;
- height: 28px;
- background: linear-gradient(135deg, var(--primary-accent), #0099cc);
- border-radius: 50%;
- left: 3px;
- transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-}
-
-/* Im Light Mode rutscht der Punkt nach rechts */
-html.light-mode .theme-toggle::before {
- transform: translateX(34px);
- background: linear-gradient(135deg, #ffd700, #ffaa00);
-}
-
-/* Icons Container */
-.theme-toggle-icons {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- padding: 0 6px;
- position: relative;
- z-index: 1;
- pointer-events: none; /* Klicks gehen auf den Button */
-}
-
-.icon-moon, .icon-sun {
- width: 18px;
- height: 18px;
- transition: all 0.3s ease;
- flex-shrink: 0;
- stroke: currentColor;
-}
-
-.icon-moon { color: #a0a0ff; opacity: 1; }
-.icon-sun { color: #ffd700; opacity: 0.3; }
-
-html.light-mode .icon-moon { opacity: 0.3; }
-html.light-mode .icon-sun { opacity: 1; }
-
-.theme-toggle:hover .icon-moon,
-.theme-toggle:hover .icon-sun {
- transform: scale(1.1);
-}
-
-/* === FAQ STYLING === */
-.page-header {
- text-align: center;
- margin-bottom: 40px;
- padding-bottom: 20px;
- border-bottom: 1px solid var(--border-color);
-}
-.page-header .page-title { font-size: 2.5rem; margin-bottom: 10px; }
-
-.faq-category-title {
- font-size: 1.5rem;
- color: var(--primary-accent);
- margin-top: 40px;
- margin-bottom: 20px;
- border-bottom: 2px solid var(--primary-accent);
- padding-bottom: 5px;
- display: none;
-}
-.faq-category-title:first-child { margin-top: 0; }
-
-.faq-item {
- background-color: var(--card-bg);
- border: 1px solid var(--border-color);
- border-radius: 8px;
- margin-bottom: 15px;
- overflow: hidden;
- transition: border-color 0.3s ease;
-}
-.faq-item:hover { border-color: var(--primary-accent); }
-
-.faq-question {
- width: 100%;
- background: none;
- border: none;
- padding: 20px;
- font-size: 0.95rem;
- font-weight: 600;
- color: var(--text-color);
- text-align: left;
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- align-items: center;
- transition: background-color 0.2s ease;
-}
-.faq-question:hover { background-color: rgba(0, 212, 255, 0.05); }
-.faq-question::after {
- content: '+';
- font-size: 1.5rem;
- font-weight: 700;
- color: var(--primary-accent);
- transition: transform 0.3s ease;
-}
-.faq-item.active .faq-question::after { transform: rotate(45deg); }
-
-.faq-answer {
- padding: 0 20px;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.4s ease-out, padding 0.4s ease-out;
-}
-.faq-answer p { margin-bottom: 20px; font-size: 0.9rem; }
-.faq-item.active .faq-answer {
- padding: 0 20px 20px;
- max-height: 1000px;
- transition: max-height 0.4s ease-in, padding 0.4s ease-in;
-}
-
-.single-faq .entry-content {
- background-color: var(--card-bg);
- padding: 30px;
- border-radius: 8px;
- border: 1px solid var(--border-color);
-}
-.back-to-faq {
- display: inline-block;
- margin-top: 15px;
- font-size: 0.9rem;
- color: var(--text-muted);
-}
-.back-to-faq:hover { color: var(--primary-accent); }
-
-.faq-archive-container {
- background-color: var(--card-bg);
- border-radius: 8px;
- border: 1px solid var(--border-color);
- padding: 40px;
- margin-bottom: 30px;
-}
-
-.faq-tabs {
- list-style: none;
- margin: 0 0 30px 0;
- padding: 0;
- display: flex;
- border-bottom: 2px solid var(--border-color);
-}
-.faq-tabs li { margin-bottom: -2px; }
-.faq-tab-button {
- background: none;
- border: none;
- padding: 15px 25px;
- font-size: 0.9rem;
- font-weight: 600;
- color: var(--text-muted);
- cursor: pointer;
- border-bottom: 3px solid transparent;
- transition: color 0.2s ease, border-color 0.2s ease;
-}
-.faq-tab-button:hover { color: var(--text-color); }
-.faq-tab-button.active {
- color: var(--primary-accent);
- border-bottom-color: var(--primary-accent);
-}
-
-/* === NEUE FAQ TAB STYLING (FESTE HÖHE) === */
-.faq-tab-content-container {
- display: grid; /* Wichtig: Erzeugt ein Gitter-Layout */
- /* Alle direkten Kinder (.faq-tab-pane) werden automatisch auf die gleiche Höhe gesetzt */
-}
-
-.faq-tab-pane {
- /* Grid-Item-Styling */
- grid-area: 1 / 1 / 2 / 2; /* Alle Panes belegen dieselbe Gitterzelle */
-
- /* Visuelles Ein- und Ausblenden */
- opacity: 0; /* Standardmäßig unsichtbar */
- pointer-events: none; /* Nicht klickbar, wenn unsichtbar */
- transition: opacity 0.4s ease-in-out;
-}
-
-.faq-tab-pane.active {
- opacity: 1; /* Sichtbar machen */
- pointer-events: auto; /* Wieder klickbar machen */
-}
-
-/* === ANKÜNDIGUNGSLEISTE ============================================== */
-
-.announcement-bar {
- background-color: var(--announcement-bg, #2c3e50);
- color: #ffffff;
- padding: 12px 0;
- text-align: center;
- position: relative;
- border-bottom: 3px solid var(--primary-accent);
- font-size: 15px;
-}
-
-.announcement-bar .container {
- display: flex;
- align-items: center;
- justify-content: center;
- padding-right: 40px;
-}
-
-.announcement-bar .announcement-title {
- margin: 0;
- font-size: 16px;
- font-weight: 600;
- color: #fff;
-}
-
-.announcement-bar p {
- margin: 0 0 15px;
-}
-
-.announcement-close {
- position: absolute;
- right: 20px;
- top: 50%;
- transform: translateY(-50%);
- background: none;
- border: none;
- color: #ffffff;
- font-size: 24px;
- line-height: 1;
- cursor: pointer;
- opacity: 0.7;
- transition: opacity 0.2s ease;
-}
-
-.announcement-close:hover {
- opacity: 1;
-}
-
-/* === CUSTOMIZER & SONSTIGES === */
-.hero-slider.slider-hide-arrows .swiper-button-next,
-.hero-slider.slider-hide-arrows .swiper-button-prev {
- opacity: 0 !important;
- pointer-events: none !important;
- transition: opacity 0.3s ease;
-}
-.hero-slider.slider-hide-pagination .swiper-pagination { display: none !important; }
-
-/* =================================================================== */
-/* === Titel der statischen Startseite ausblenden ==================== */
-/* =================================================================== */
-
-/* Zielt genau auf das
-Element mit der Klasse "post-title" ab */
-body.home-title-hidden h2.post-title {
- display: none !important;
-}
-
-/* =========================================================================
-=== SCROLL TO TOP BUTTON ===============================================
-========================================================================= */
-
-#scroll-to-top {
- position: fixed;
- bottom: 30px; /* <== WIEDER NORMAL POSITIONIERT */
- right: 30px;
- width: 50px;
- height: 50px;
- background-color: var(--primary-accent, #00d4ff);
- color: #fff;
- border: none;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- font-size: 18px;
- line-height: 1;
- z-index: 9999;
- cursor: pointer;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-#scroll-to-top.show {
- opacity: 1;
- visibility: visible;
-}
-
-#scroll-to-top:hover {
- background-color: #00a8cc; /* Etwas dunklerer Blauton beim Hover */
- transform: translateY(-5px); /* Kleiner "Bounce"-Effekt beim Hover */
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-}
-
-/* Anpassungen für kleinere Bildschirme */
-@media screen and (max-width: 768px) {
- #scroll-to-top {
- bottom: 20px; /* Mobile Standard */
- right: 20px;
- width: 45px;
- height: 45px;
- font-size: 16px;
- }
-}
-
-/* Ladezustand für den Slider - Verhindert das Flackern beim Laden */
-.hero-slider.swiper-loading {
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.4s ease-in-out;
-}
-.hero-slider:not(.swiper-loading) {
- opacity: 1;
- visibility: visible;
-}
-
-/* =================================================================== */
-/* === Abstand für die neuen Trennlinien ============================== */
-/* =================================================================== */
-
-/* Abstand nach dem Slider zum Hauptinhalt */
-main#primary.site-main {
- padding-top: 40px; /* Passe den Wert bei Bedarf an */
-}
-
-/* =================================================================== */
-/* === RESPONSIVE DESIGN ============================================== */
-/* =================================================================== */
-
-/* --- Navigation Mobile Breakpoint (992px) --- */
-@media (max-width: 992px) {
- .header-main {
- gap: 20px;
- flex-wrap: wrap;
- }
-
- .site-branding { flex-grow: 1; }
- .header-info { order: 2; } /* Social rechts */
- #site-navigation { order: 3; width: 100%; }
-
- .menu-toggle {
- display: block;
- margin-left: auto;
- }
-
- /* Hauptliste mobil */
- .primary-menu {
- display: none; /* Standardmäßig eingeklappt */
- flex-direction: column;
- width: 100%;
- gap: 0;
- background-color: var(--surface-color);
- border: 1px solid var(--border-color);
- border-radius: 8px;
- margin-top: 20px;
- padding: 10px 0;
- }
-
- /* Wenn .toggled aktiv ist, zeigen */
- #site-navigation.toggled .primary-menu {
- display: flex;
- animation: slideDown 0.3s ease forwards;
- }
-
- .menu-item { width: 100%; text-align: left; }
- #site-navigation a { padding: 15px 20px; }
-
- /* Submenus mobil - Akkordeon Style */
- .sub-menu {
- position: static;
- opacity: 1;
- visibility: visible;
- transform: none;
- display: none; /* Standardmäßig eingeklappt */
- width: 100%;
- box-shadow: none;
- border: none;
- border-left: 2px solid var(--primary-accent);
- background-color: rgba(0,0,0,0.2);
- margin-top: 5px;
- margin-bottom: 5px;
- padding-left: 15px;
- }
-
- /* Mobil: Wenn Eltern-Element aktiv ist, zeige Submenu */
- .menu-item.active > .sub-menu {
- display: block;
- }
-
- .sub-menu .sub-menu { padding-left: 20px; border-left: none; }
-
- /* Pfeile im Mobile-Modus ausblenden oder anpassen */
- .menu-item-has-children > a::after { float: right; }
-}
-
-@keyframes slideDown {
- from { opacity: 0; transform: translateY(-10px); }
- to { opacity: 1; transform: translateY(0); }
-}
-
-/* --- General Mobile Breakpoint (768px) --- */
-@media (max-width: 768px) {
- /* Header */
- .custom-logo-link img, .custom-logo { max-height: 50px; }
-
- /* Hero */
- .slider-title { font-size: 32px; }
- .slider-subtitle { font-size: 18px; }
- .hero-buttons a { display: block; margin: 10px auto; width: 80%; }
-
- /* Footer Responsive */
- .site-footer {
- padding: 40px 0 0 0;
- }
-
- .footer-bottom-bar {
- flex-direction: column;
- align-items: flex-start; /* Links ausrichten auf Mobile */
- text-align: center; /* Zentrieren */
- gap: 15px;
- }
-
- .footer-left-group,
- .footer-right-group,
- .footer-navigation {
- width: 100%;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- }
-
- .site-info, .footer-legal-links a {
- text-align: center;
- }
-
- .footer-menu {
- flex-wrap: wrap;
- justify-content: center;
- }
-
- /* Theme Toggle Responsive */
- .theme-toggle {
- width: 60px;
- height: 32px;
- left: 15px; /* <== Links bleiben */
- bottom: 15px;
- }
- .theme-toggle::before {
- width: 24px;
- height: 24px;
- }
- html.light-mode .theme-toggle::before { transform: translateX(28px); }
- .icon-moon, .icon-sun { width: 16px; height: 16px; }
-}
-
-/* =================================================================== */
-/* === Titel der Startseite ausblenden / anzeigen ==================== */
-/* =================================================================== */
-
-/* Wenn der Body die Klasse hat, wird der komplette Header-Bereich der Startseite ausgeblendet */
-body.home-title-hidden .site-main .entry-header,
-body.home-title-hidden .site-main .page-header {
- display: none !important;
+/*
+Theme Name: Minecraft Modern Theme
+Theme URI: https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme
+Author: M_Viper
+Description: Ein modernes Gaming-Theme mit konfigurierbarem Header-Slider.
+Author URI: https://M-Viper.de
+Version: 1.6
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: minecraft-modern-theme
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');
+
+/* === DARK / LIGHT MODE VARIABLEN === */
+:root {
+ --bg-color: #14151a;
+ --surface-color: #1e2029;
+ --card-bg: #252830;
+ --text-color: #e4e4e4;
+ --text-muted: #a0a0a0;
+ --primary-accent: #00d4ff;
+ --header-bg: rgba(20, 21, 26, 0.8);
+ --header-scrolled-bg: #14151a;
+ --border-color: #333;
+ --header-height: 500px;
+}
+
+html.light-mode {
+ --bg-color: #f8f9fa;
+ --surface-color: #ffffff;
+ --card-bg: #ffffff;
+ --text-color: #212529;
+ --text-muted: #6c757d;
+ --header-bg: rgba(255, 255, 255, 0.95);
+ --header-scrolled-bg: #ffffff;
+ --border-color: #dee2e6;
+}
+
+/* Sanfte Übergänge */
+body, .site-header, .site-footer, .post, .faq-item, .theme-toggle {
+ transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
+}
+
+/* === ALLGEMEINE STYLES & STICKY FOOTER SETUP === */
+body {
+ font-family: 'Raleway', sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ margin: 0;
+ line-height: 1.7;
+}
+
+/* WICHTIG: Dies sind die Regeln, die den Footer immer unten halten */
+html { height: 100%; }
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+.site-main {
+ flex: 1; /* Sorgt dafür, dass der Hauptinhalt den verfügbaren Platz ausfüllt */
+}
+
+h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--text-color); }
+
+a { color: var(--primary-accent); text-decoration: none; font-weight: 600; transition: color 0.2s ease; }
+a:hover { color: #fff; }
+
+.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
+
+/* === HEADER & NAVIGATION === */
+.site-header {
+ background-color: var(--header-bg);
+ backdrop-filter: blur(10px);
+ padding: 30px 0; /* FIX: Mehr vertikaler Platz im Header */
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+.site-header.scrolled {
+ background-color: var(--header-scrolled-bg);
+ box-shadow: 0 2px 15px rgba(0,0,0,0.3);
+}
+
+.header-main {
+ display: flex;
+ align-items: center;
+ justify-content: space-between; /* FIX: Logo Links, Menü Mitte, Info Rechts */
+ gap: 40px; /* Flexiblerer Abstand */
+}
+
+/* WICHTIG: Typo im Header.html korrigieren!
+ HTML:
+ CSS: .site-branding
+ Sie müssen die 'g' im HTML oder CSS angleichen, sonst ist das Layout kaputt.
+*/
+.site-branding {
+ display: flex;
+ align-items: center;
+}
+
+.custom-logo-link img, .custom-logo {
+ max-height: 60px;
+ margin-right: 15px;
+ width: auto;
+}
+
+.site-branding h1, .site-title {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 700;
+}
+
+.site-branding a {
+ color: var(--text-color);
+ text-decoration: none;
+}
+
+/* =================================================================== */
+/* === NEUE DROPDOWN NAVIGATION ======================================= */
+/* =================================================================== */
+
+#site-navigation {
+ position: relative;
+ flex-grow: 1; /* FIX: Navigation nimmt den gesamten Platz in der Mitte ein */
+ display: flex;
+ justify-content: center; /* Zentriert das Menü innerhalb seines Raums */
+ align-items: center;
+ padding: 0 30px; /* Mindestabstand zu Logo und Socials */
+}
+
+/* Hauptliste (Top Level) */
+.primary-menu {
+ display: flex;
+ align-items: center;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 20px; /* Abstand zwischen Menüpunkten horizontal */
+}
+
+/* Menüpunkte */
+.menu-item {
+ position: relative;
+}
+
+/* Links in der Navigation */
+.main-navigation a {
+ display: inline-block;
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--text-muted);
+ text-decoration: none;
+ padding: 20px 0; /* FIX: Mehr vertikaler Platz (Oben/Unten) ohne horizontales Padding */
+ transition: color 0.3s ease;
+ position: relative;
+}
+
+.main-navigation a:hover {
+ color: var(--primary-accent);
+}
+
+/* Pfeil-Icon für Untermenü-Punkte (Desktop) */
+.menu-item-has-children > a::after {
+ content: '\f107'; /* FontAwesome Down Arrow */
+ font-family: 'Font Awesome 6 Free';
+ font-weight: 900;
+ margin-left: 8px;
+ font-size: 0.8em;
+ display: inline-block;
+ transition: transform 0.3s ease;
+}
+
+/* Pfeil drehen beim Hover */
+.menu-item-has-children:hover > a::after {
+ transform: rotate(180deg);
+}
+
+/* --- DROPDOWNS (Untermenüs Level 1) --- */
+.sub-menu {
+ position: absolute;
+ top: 100%; /* Direkt unter dem Elternpunkt */
+ left: 0;
+ background-color: var(--surface-color);
+ border:1px solid var(--border-color);
+ border-top: 3px solid var(--primary-accent);
+ min-width: 240px;
+ list-style: none;
+ padding: 10px 0;
+ margin: 0;
+ z-index: 9999;
+
+ /* Animationseinstellungen */
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(20px);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+ border-radius: 0 0 8px 8px;
+}
+
+/* Dropdown anzeigen bei Hover */
+.menu-item-has-children:hover > .sub-menu {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(10px);
+}
+
+/* Links im Dropdown */
+.sub-menu li a {
+ padding: 12px 25px;
+ color: var(--text-color);
+ border-bottom: 1px solid rgba(255,255,255,0.05);
+ font-size: 14px;
+ white-space: nowrap;
+
+ /* FIX: Vollständige Hintergrund-Markierung */
+ display: block;
+ width: 100%;
+ box-sizing: border-box; /* Padding wird zur Breite hinzugezählt */
+ transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
+}
+
+.sub-menu li:last-child a {
+ border-bottom: none;
+}
+
+.sub-menu li a:hover {
+ background-color: rgba(0, 212, 255, 0.1);
+ color: var(--primary-accent);
+ padding-left: 30px; /* Schiebe-Effekt */
+}
+
+/* --- DROPDOWN LEVEL 2 (falls vorhanden) --- */
+.sub-menu .sub-menu {
+ top: 0;
+ left: 100%; /* Rechts neben dem Elternmenü */
+ margin-top: -3px;
+}
+.sub-menu li:hover > .sub-menu {
+ opacity: 1;
+ visibility: visible;
+ transform: translateX(10px);
+}
+
+/* Pfeil für Level 2 nach rechts zeigen */
+.sub-menu .menu-item-has-children > a::after {
+ content: '\f105'; /* FontAwesome Right Arrow */
+ float: right;
+ margin-left: 0;
+ margin-top: 4px;
+}
+
+/* --- MOBILE TOGGLE BUTTON --- */
+.menu-toggle {
+ display: none; /* Auf Desktop ausblenden */
+ background: transparent;
+ border: none;
+ color: var(--text-color);
+ font-size: 24px;
+ cursor: pointer;
+ padding: 5px;
+ transition: color 0.3s ease;
+}
+.menu-toggle:hover {
+ color: var(--primary-accent);
+}
+
+/* --- HEADER INFO & SOCIAL LINKS --- */
+.header-info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.social-links {
+ display: flex;
+ gap: 15px;
+}
+
+.social-links a {
+ font-size: 18px;
+ color: var(--text-muted);
+ transition: color 0.2s ease;
+}
+.social-links a:hover {
+ color: var(--primary-accent);
+}
+
+/* === HERO / SLIDER === */
+.hero-slider {
+ width: 100%;
+ height: var(--header-height);
+ position: relative;
+}
+
+.swiper-slide {
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.swiper-slide::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: 1;
+}
+
+.slider-content {
+ text-align: center;
+ color: #fff;
+ z-index: 2;
+ padding: 20px;
+}
+.slider-title {
+ font-size: 48px;
+ font-weight: 700;
+ margin-bottom: 20px;
+ text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
+}
+.slider-subtitle {
+ font-size: 20px;
+ font-weight: 400;
+}
+
+.swiper-pagination-bullet { background: #fff; opacity: 0.5; }
+.swiper-pagination-bullet-active { background: var(--primary-accent); opacity: 1; }
+
+.swiper-button-prev, .swiper-button-next {
+ color: #fff;
+ background: rgba(0,0,0,0.3);
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ transition: background 0.2s ease;
+}
+.swiper-button-prev:hover, .swiper-button-next:hover { background: rgba(0,0,0,0.6); }
+.swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; }
+
+/* === Hauptinhalt & Karten-Layout === */
+.site-main { padding: 80px 0; }
+
+.content-area {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 30px;
+}
+
+.post, .page-content {
+ background-color: var(--card-bg);
+ border-radius: 8px;
+ overflow: hidden;
+ border: 1px solid var(--border-color);
+ transition: transform 0.3s ease, border-color 0.3s ease;
+}
+.post:hover, .page-content:hover {
+ transform: translateY(-5px);
+ border-color: var(--primary-accent);
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+}
+
+.post-content, .page-content-inner { padding: 25px; }
+.post-title, .page-title {
+ font-size: 20px;
+ margin-top: 0;
+ margin-bottom: 10px;
+}
+.post-title a, .page-title a {
+ color: var(--text-color);
+}
+.post-title a:hover, .page-title a:hover {
+ color: var(--primary-accent);
+}
+
+/* === FOOTER (NEUES DESIGN) ========================================== */
+
+.site-footer {
+ background-color: var(--surface-color);
+ border-top: 4px solid var(--primary-accent);
+ padding: 60px 0 0 0;
+ margin-top: 0;
+ position: relative;
+ flex-shrink: 0;
+}
+
+/* Widget Grid Layout */
+.footer-widgets {
+ display: grid;
+ /* Responsive Grid: Mindestens 250px breit, füllt den Rest auf */
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 40px;
+ margin-bottom: 50px;
+}
+
+/* Widget Überschriften */
+.footer-widget .widget-title {
+ font-size: 16px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--primary-accent);
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 2px solid rgba(255,255,255,0.1);
+ display: inline-block;
+}
+
+/* Listen in Widgets */
+.footer-widget ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.footer-widget ul li {
+ margin-bottom: 12px;
+}
+
+.footer-widget ul li a {
+ color: var(--text-muted);
+ text-decoration: none;
+ font-size: 14px;
+ transition: all 0.3s ease;
+ display: inline-block;
+ border-left: 2px solid transparent;
+ padding-left: 10px;
+}
+
+.footer-widget ul li a:hover {
+ color: #fff;
+ border-left-color: var(--primary-accent);
+ padding-left: 15px; /* Schiebe-Effekt */
+}
+
+/* === FOOTER BOTTOM BAR ============================================= */
+
+.footer-bottom-bar {
+ border-top: 1px solid var(--border-color);
+ padding: 25px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 20px;
+ font-size: 13px;
+}
+
+.footer-left-group {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.footer-right-group {
+ display: flex;
+ align-items: center;
+}
+
+/* Site Info & Credit */
+.site-info {
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.footer-credit a {
+ color: var(--text-muted);
+ transition: color 0.2s;
+}
+.footer-credit a:hover {
+ color: var(--primary-accent);
+}
+
+/* Footer Navigation (Menü unten) */
+.footer-navigation {
+ display: flex;
+ gap: 20px;
+}
+
+.footer-menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ gap: 15px;
+}
+
+.footer-menu a {
+ color: var(--text-muted);
+ text-decoration: none;
+ font-size: 13px;
+ transition: color 0.2s;
+}
+.footer-menu a:hover {
+ color: #fff;
+ text-decoration: underline;
+}
+
+/* Legal Links */
+.footer-legal-links {
+ display: flex;
+ gap: 20px;
+}
+
+.footer-legal-links a {
+ color: var(--text-muted);
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ transition: color 0.2s;
+}
+.footer-legal-links a:hover {
+ color: var(--primary-accent);
+}
+.footer-legal-links i {
+ font-size: 14px;
+}
+
+/* === THEME TOGGLE (Fixiert unten links) ========================= */
+
+.theme-toggle {
+ position: fixed; /* Schwebend über dem Inhalt */
+ left: 30px; /* <== WIEDER LINKS */
+ bottom: 30px;
+ z-index: 9999;
+ width: 70px;
+ height: 36px;
+ background: var(--card-bg);
+ border: 2px solid var(--border-color);
+ border-radius: 30px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ padding: 3px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+ backdrop-filter: blur(10px);
+ transition: all 0.3s ease;
+ outline: none;
+}
+
+.theme-toggle:hover {
+ border-color: var(--primary-accent);
+ box-shadow: 0 0 25px rgba(0,212,255,0.5);
+}
+
+/* Light Mode Anpassung für den Toggle */
+html.light-mode .theme-toggle {
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ background: #fff;
+}
+
+/* Der bewegliche Punkt im Toggle */
+.theme-toggle::before {
+ content: '';
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background: linear-gradient(135deg, var(--primary-accent), #0099cc);
+ border-radius: 50%;
+ left: 3px;
+ transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+/* Im Light Mode rutscht der Punkt nach rechts */
+html.light-mode .theme-toggle::before {
+ transform: translateX(34px);
+ background: linear-gradient(135deg, #ffd700, #ffaa00);
+}
+
+/* Icons Container */
+.theme-toggle-icons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 0 6px;
+ position: relative;
+ z-index: 1;
+ pointer-events: none; /* Klicks gehen auf den Button */
+}
+
+.icon-moon, .icon-sun {
+ width: 18px;
+ height: 18px;
+ transition: all 0.3s ease;
+ flex-shrink: 0;
+ stroke: currentColor;
+}
+
+.icon-moon { color: #a0a0ff; opacity: 1; }
+.icon-sun { color: #ffd700; opacity: 0.3; }
+
+html.light-mode .icon-moon { opacity: 0.3; }
+html.light-mode .icon-sun { opacity: 1; }
+
+.theme-toggle:hover .icon-moon,
+.theme-toggle:hover .icon-sun {
+ transform: scale(1.1);
+}
+
+/* === FAQ STYLING === */
+.page-header {
+ text-align: center;
+ margin-bottom: 40px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid var(--border-color);
+}
+.page-header .page-title { font-size: 2.5rem; margin-bottom: 10px; }
+
+.faq-category-title {
+ font-size: 1.5rem;
+ color: var(--primary-accent);
+ margin-top: 40px;
+ margin-bottom: 20px;
+ border-bottom: 2px solid var(--primary-accent);
+ padding-bottom: 5px;
+ display: none;
+}
+.faq-category-title:first-child { margin-top: 0; }
+
+.faq-item {
+ background-color: var(--card-bg);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ margin-bottom: 15px;
+ overflow: hidden;
+ transition: border-color 0.3s ease;
+}
+.faq-item:hover { border-color: var(--primary-accent); }
+
+.faq-question {
+ width: 100%;
+ background: none;
+ border: none;
+ padding: 20px;
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: var(--text-color);
+ text-align: left;
+ cursor: pointer;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: background-color 0.2s ease;
+}
+.faq-question:hover { background-color: rgba(0, 212, 255, 0.05); }
+.faq-question::after {
+ content: '+';
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--primary-accent);
+ transition: transform 0.3s ease;
+}
+.faq-item.active .faq-question::after { transform: rotate(45deg); }
+
+.faq-answer {
+ padding: 0 20px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.4s ease-out, padding 0.4s ease-out;
+}
+.faq-answer p { margin-bottom: 20px; font-size: 0.9rem; }
+.faq-item.active .faq-answer {
+ padding: 0 20px 20px;
+ max-height: 1000px;
+ transition: max-height 0.4s ease-in, padding 0.4s ease-in;
+}
+
+.single-faq .entry-content {
+ background-color: var(--card-bg);
+ padding: 30px;
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+}
+.back-to-faq {
+ display: inline-block;
+ margin-top: 15px;
+ font-size: 0.9rem;
+ color: var(--text-muted);
+}
+.back-to-faq:hover { color: var(--primary-accent); }
+
+.faq-archive-container {
+ background-color: var(--card-bg);
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ padding: 40px;
+ margin-bottom: 30px;
+}
+
+.faq-tabs {
+ list-style: none;
+ margin: 0 0 30px 0;
+ padding: 0;
+ display: flex;
+ border-bottom: 2px solid var(--border-color);
+}
+.faq-tabs li { margin-bottom: -2px; }
+.faq-tab-button {
+ background: none;
+ border: none;
+ padding: 15px 25px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--text-muted);
+ cursor: pointer;
+ border-bottom: 3px solid transparent;
+ transition: color 0.2s ease, border-color 0.2s ease;
+}
+.faq-tab-button:hover { color: var(--text-color); }
+.faq-tab-button.active {
+ color: var(--primary-accent);
+ border-bottom-color: var(--primary-accent);
+}
+
+/* === NEUE FAQ TAB STYLING (FESTE HÖHE) === */
+.faq-tab-content-container {
+ display: grid; /* Wichtig: Erzeugt ein Gitter-Layout */
+ /* Alle direkten Kinder (.faq-tab-pane) werden automatisch auf die gleiche Höhe gesetzt */
+}
+
+.faq-tab-pane {
+ /* Grid-Item-Styling */
+ grid-area: 1 / 1 / 2 / 2; /* Alle Panes belegen dieselbe Gitterzelle */
+
+ /* Visuelles Ein- und Ausblenden */
+ opacity: 0; /* Standardmäßig unsichtbar */
+ pointer-events: none; /* Nicht klickbar, wenn unsichtbar */
+ transition: opacity 0.4s ease-in-out;
+}
+
+.faq-tab-pane.active {
+ opacity: 1; /* Sichtbar machen */
+ pointer-events: auto; /* Wieder klickbar machen */
+}
+
+/* === ANKÜNDIGUNGSLEISTE ============================================== */
+
+.announcement-bar {
+ background-color: var(--announcement-bg, #2c3e50);
+ color: #ffffff;
+ padding: 12px 0;
+ text-align: center;
+ position: relative;
+ border-bottom: 3px solid var(--primary-accent);
+ font-size: 15px;
+}
+
+.announcement-bar .container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-right: 40px;
+}
+
+.announcement-bar .announcement-title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+}
+
+.announcement-bar p {
+ margin: 0 0 15px;
+}
+
+.announcement-close {
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: #ffffff;
+ font-size: 24px;
+ line-height: 1;
+ cursor: pointer;
+ opacity: 0.7;
+ transition: opacity 0.2s ease;
+}
+
+.announcement-close:hover {
+ opacity: 1;
+}
+
+/* === CUSTOMIZER & SONSTIGES === */
+.hero-slider.slider-hide-arrows .swiper-button-next,
+.hero-slider.slider-hide-arrows .swiper-button-prev {
+ opacity: 0 !important;
+ pointer-events: none !important;
+ transition: opacity 0.3s ease;
+}
+.hero-slider.slider-hide-pagination .swiper-pagination { display: none !important; }
+
+/* =================================================================== */
+/* === Titel der statischen Startseite ausblenden ==================== */
+/* =================================================================== */
+
+/* Zielt genau auf das
-Element mit der Klasse "post-title" ab */
+body.home-title-hidden h2.post-title {
+ display: none !important;
+}
+
+/* =========================================================================
+=== SCROLL TO TOP BUTTON ===============================================
+========================================================================= */
+
+#scroll-to-top {
+ position: fixed;
+ bottom: 30px; /* <== WIEDER NORMAL POSITIONIERT */
+ right: 30px;
+ width: 50px;
+ height: 50px;
+ background-color: var(--primary-accent, #00d4ff);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 18px;
+ line-height: 1;
+ z-index: 9999;
+ cursor: pointer;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+#scroll-to-top.show {
+ opacity: 1;
+ visibility: visible;
+}
+
+#scroll-to-top:hover {
+ background-color: #00a8cc; /* Etwas dunklerer Blauton beim Hover */
+ transform: translateY(-5px); /* Kleiner "Bounce"-Effekt beim Hover */
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+/* Anpassungen für kleinere Bildschirme */
+@media screen and (max-width: 768px) {
+ #scroll-to-top {
+ bottom: 20px; /* Mobile Standard */
+ right: 20px;
+ width: 45px;
+ height: 45px;
+ font-size: 16px;
+ }
+}
+
+/* Ladezustand für den Slider - Verhindert das Flackern beim Laden */
+.hero-slider.swiper-loading {
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.4s ease-in-out;
+}
+.hero-slider:not(.swiper-loading) {
+ opacity: 1;
+ visibility: visible;
+}
+
+/* =================================================================== */
+/* === Abstand für die neuen Trennlinien ============================== */
+/* =================================================================== */
+
+/* Abstand nach dem Slider zum Hauptinhalt */
+main#primary.site-main {
+ padding-top: 40px; /* Passe den Wert bei Bedarf an */
+}
+
+/* =================================================================== */
+/* === RESPONSIVE DESIGN ============================================== */
+/* =================================================================== */
+
+/* --- Navigation Mobile Breakpoint (992px) --- */
+@media (max-width: 992px) {
+ .header-main {
+ gap: 20px;
+ flex-wrap: wrap;
+ }
+
+ .site-branding { flex-grow: 1; }
+ .header-info { order: 2; } /* Social rechts */
+ #site-navigation { order: 3; width: 100%; }
+
+ .menu-toggle {
+ display: block;
+ margin-left: auto;
+ }
+
+ /* Hauptliste mobil */
+ .primary-menu {
+ display: none; /* Standardmäßig eingeklappt */
+ flex-direction: column;
+ width: 100%;
+ gap: 0;
+ background-color: var(--surface-color);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ margin-top: 20px;
+ padding: 10px 0;
+ }
+
+ /* Wenn .toggled aktiv ist, zeigen */
+ #site-navigation.toggled .primary-menu {
+ display: flex;
+ animation: slideDown 0.3s ease forwards;
+ }
+
+ .menu-item { width: 100%; text-align: left; }
+ #site-navigation a { padding: 15px 20px; }
+
+ /* Submenus mobil - Akkordeon Style */
+ .sub-menu {
+ position: static;
+ opacity: 1;
+ visibility: visible;
+ transform: none;
+ display: none; /* Standardmäßig eingeklappt */
+ width: 100%;
+ box-shadow: none;
+ border: none;
+ border-left: 2px solid var(--primary-accent);
+ background-color: rgba(0,0,0,0.2);
+ margin-top: 5px;
+ margin-bottom: 5px;
+ padding-left: 15px;
+ }
+
+ /* Mobil: Wenn Eltern-Element aktiv ist, zeige Submenu */
+ .menu-item.active > .sub-menu {
+ display: block;
+ }
+
+ .sub-menu .sub-menu { padding-left: 20px; border-left: none; }
+
+ /* Pfeile im Mobile-Modus ausblenden oder anpassen */
+ .menu-item-has-children > a::after { float: right; }
+}
+
+@keyframes slideDown {
+ from { opacity: 0; transform: translateY(-10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* --- General Mobile Breakpoint (768px) --- */
+@media (max-width: 768px) {
+ /* Header */
+ .custom-logo-link img, .custom-logo { max-height: 50px; }
+
+ /* Hero */
+ .slider-title { font-size: 32px; }
+ .slider-subtitle { font-size: 18px; }
+ .hero-buttons a { display: block; margin: 10px auto; width: 80%; }
+
+ /* Footer Responsive */
+ .site-footer {
+ padding: 40px 0 0 0;
+ }
+
+ .footer-bottom-bar {
+ flex-direction: column;
+ align-items: flex-start; /* Links ausrichten auf Mobile */
+ text-align: center; /* Zentrieren */
+ gap: 15px;
+ }
+
+ .footer-left-group,
+ .footer-right-group,
+ .footer-navigation {
+ width: 100%;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .site-info, .footer-legal-links a {
+ text-align: center;
+ }
+
+ .footer-menu {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ /* Theme Toggle Responsive */
+ .theme-toggle {
+ width: 60px;
+ height: 32px;
+ left: 15px; /* <== Links bleiben */
+ bottom: 15px;
+ }
+ .theme-toggle::before {
+ width: 24px;
+ height: 24px;
+ }
+ html.light-mode .theme-toggle::before { transform: translateX(28px); }
+ .icon-moon, .icon-sun { width: 16px; height: 16px; }
+}
+
+/* =================================================================== */
+/* === Titel der Startseite ausblenden / anzeigen ==================== */
+/* =================================================================== */
+
+/* Wenn der Body die Klasse hat, wird der komplette Header-Bereich der Startseite ausgeblendet */
+body.home-title-hidden .site-main .entry-header,
+body.home-title-hidden .site-main .page-header {
+ display: none !important;
+}
+
+/* Announcement Bar - basics */
+#mm-announcement {
+ width: 100%;
+ position: relative;
+ z-index: 9999;
+ box-sizing: border-box;
+ transition: all 220ms ease;
+}
+
+/* Inner container centers text and keeps close button to the right */
+.mm-announcement-inner {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 12px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+/* Text center */
+.mm-announcement-text {
+ text-align: center;
+ line-height: 1.2;
+}
+
+/* Close button on the right edge of the inner container */
+.mm-announcement-close {
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: inherit;
+ font-size: 22px;
+ cursor: pointer;
+ padding: 6px;
+ line-height: 1;
+}
+
+/* Responsive tweaks */
+@media (max-width: 600px) {
+ .mm-announcement-inner {
+ padding: 10px 12px;
+ }
+ .mm-announcement-close {
+ right: 12px;
+ font-size: 20px;
+ }
+ .mm-announcement-text { font-size: 14px; }
+}
+
+/* ==========================================================================
+ TEAM / STAFF SHOWCASE STYLES (AKTUALISIERT)
+ ========================================================================== */
+
+/* --- WICHTIG: Container Breite definieren ---
+ Das sorgt dafür, dass die Cards breiter werden können. */
+.container {
+ max-width: 1500px; /* Von 1200px auf 1500px erhöht für breitere Karten */
+ margin: 0 auto;
+ padding: 0 20px;
+ width: 100%;
+}
+
+/* --- 1. Container Der Hintergrund-Karton --- */
+.team-archive-container {
+ background-color: var(--card-bg);
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ padding: 50px;
+ margin-bottom: 30px;
+ margin-top: 40px;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 50px;
+}
+
+.page-header .page-title {
+ font-size: 2.5rem;
+ color: var(--primary-accent);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin-bottom: 10px;
+}
+
+.page-header .page-description {
+ font-size: 1.2rem;
+ color: var(--text-muted);
+}
+
+/* --- 2. Grid Layout (FESTE 3 SPALTEN) --- */
+.team-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 25px; /* Etwas weniger Abstand = Mehr Breite */
+}
+
+/* --- 3. Team Card Design (AKTUELL) --- */
+.team-card {
+ background-color: transparent;
+ /* AKTUALISIERUNG: Border ist jetzt die Akzentfarbe (farbig) */
+ border: 1.5px solid var(--primary-accent);
+ border-radius: 12px;
+ overflow: visible; /* Avatar soll über den Rand ragen */
+ transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 0 0 40px 0;
+ margin-top: 50px;
+
+ height: 70%;
+ width: 100%;
+ justify-content: space-between;
+}
+
+/* Hover Effekt */
+.team-card:hover {
+ transform: translateY(-10px);
+ /* Border wird beim Hover auch heller oder die Glow-Farbe je nach Wunsch */
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 212, 255, 0.4);
+}
+
+/* --- 4. Runder Avatar (AKTUELL) --- */
+.team-image-wrapper {
+ margin-top: -50px;
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ border: 5px solid var(--card-bg); /* Innerer Hintergrund-Rand */
+
+ /* WICHTIG: Hier ist KEIN box-shadow mehr (Kein dauerhafter Glow) */
+
+ overflow: hidden;
+ background-color: #000;
+ z-index: 2;
+ flex-shrink: 0;
+
+ /* Transition für den Hover-Effekt hinzugefügt */
+ transition: transform 0.5s ease, box-shadow 0.3s ease;
+}
+
+.team-image-wrapper img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* --- NEU: Glow ONLY ON HOVER --- */
+/* Wenn Maus auf die Karte fährt, bekommt der Avatar einen Glow */
+.team-card:hover .team-image-wrapper {
+ /* Der Glow erscheint nur hier */
+ box-shadow: 0 0 0 6px var(--primary-accent);
+}
+
+/* Zusätzlich: Zoom-Effekt beim Hover (Optionale Verfeinerung) */
+.team-card:hover .team-image-wrapper img {
+ transform: scale(1.05);
+}
+
+/* --- 5. Info Bereich --- */
+.team-info {
+ padding: 15px 35px 0 35px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.team-name {
+ margin: 20px 0 8px 0;
+ font-size: 1.8rem;
+ color: var(--text-color);
+ font-weight: 700;
+ line-height: 1.2;
+ min-height: 1.2em;
+}
+
+/* --- 6. Mehrere Ränge (Wrapper) --- */
+.team-ranks-wrapper {
+ margin-bottom: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+}
+
+.team-rank {
+ display: inline-block;
+ background-color: rgba(0, 212, 255, 0.1);
+ color: var(--primary-accent);
+ padding: 6px 16px;
+ border-radius: 25px;
+ font-size: 0.85rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+/* --- 7. Bio Text (Begrenzung & Styling) --- */
+.team-bio {
+ font-size: 1rem;
+ color: var(--text-muted);
+ line-height: 1.6;
+
+ /* Füllt den restlichen Platz bis unten aus */
+ margin-top: auto;
+
+ /* Begrenzung auf max 4 Zeilen */
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ /* Fallback für alte Browser */
+ max-height: 6.4em;
+}
+
+/* --- 8. Responsive Design (Tablet & Mobile) --- */
+
+/* Tablet (2 Spalten) */
+@media (max-width: 1100px) {
+ .team-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 30px;
+ }
+ .team-name { font-size: 1.6rem; }
+}
+
+/* Mobile (1 Spalte) */
+@media (max-width: 768px) {
+ .container {
+ padding: 0 15px;
+ max-width: 100%;
+ }
+
+ .team-grid {
+ grid-template-columns: 1fr;
+ gap: 25px;
+ }
+
+ .team-archive-container {
+ padding: 30px 20px;
+ }
+
+ .team-name {
+ font-size: 1.5rem;
+ }
+
+ .team-image-wrapper {
+ width: 120px;
+ height: 120px;
+ margin-top: -40px;
+ }
}
\ No newline at end of file