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