diff --git a/Minecraft-Modern-Theme/archive-faq.php b/Minecraft-Modern-Theme/archive-faq.php new file mode 100644 index 0000000..054460c --- /dev/null +++ b/Minecraft-Modern-Theme/archive-faq.php @@ -0,0 +1,94 @@ + + +
+
+ + +
+ +
+

+

+
+ + 'faq_category', + 'orderby' => 'name', + 'order' => 'ASC' + ) ); + + if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) : ?> + + +
    + +
  • + +
    • + +
+ + +
+ +
+ + 'faq', + 'posts_per_page' => -1, + 'tax_query' => array( + array( + 'taxonomy' => 'faq_category', + 'field' => 'slug', + 'terms' => $category->slug, + ), + ), + 'orderby' => 'menu_order', + 'order' => 'ASC', + ) ); + + if ( $faqs->have_posts() ) : ?> +
+ have_posts() ) : $faqs->the_post(); ?> +
+ +
+
+ +
+ +

+ + +
+ +
+ + +

+ + +
+ +
+
+ + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/dynamic-styles.php b/Minecraft-Modern-Theme/dynamic-styles.php new file mode 100644 index 0000000..1b19b75 --- /dev/null +++ b/Minecraft-Modern-Theme/dynamic-styles.php @@ -0,0 +1,26 @@ + + +/* Dynamische Stile für Slider und Hero-Sektion */ +:root { + --primary-accent: ; +} + +.slider-title, .slider-subtitle, .hero-title, .hero-subtitle, .hero-button-1, .hero-button-2 { + font-family: '', sans-serif; + color: ; +} \ No newline at end of file diff --git a/Minecraft-Modern-Theme/footer.php b/Minecraft-Modern-Theme/footer.php new file mode 100644 index 0000000..d358c8a --- /dev/null +++ b/Minecraft-Modern-Theme/footer.php @@ -0,0 +1,93 @@ + + + + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/front-page.php b/Minecraft-Modern-Theme/front-page.php new file mode 100644 index 0000000..7bd4edd --- /dev/null +++ b/Minecraft-Modern-Theme/front-page.php @@ -0,0 +1,80 @@ + + + +
+
+ +
+
+ +

+ + +

+ +
+
+ +
+
+
+
+
+ + +
"> +
+

+

+
+ + +
+
+
+ + +
+
+
+ +
> + +
+ +
+ +
+

+
+ +
+
+
+ +

+ +
+
+
+ + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/functions.php b/Minecraft-Modern-Theme/functions.php new file mode 100644 index 0000000..3b4fc4f --- /dev/null +++ b/Minecraft-Modern-Theme/functions.php @@ -0,0 +1,240 @@ + 9999, // Sehr hohe Werte, um den Crop-Dialog zu umgehen + 'width' => 9999, // Sehr hohe Werte, um den Crop-Dialog zu umgehen + 'flex-height' => true, + 'flex-width' => true, + 'header-text' => array( 'site-title', 'site-description' ), + ) ); + + // Benutzerdefinierten Hintergrund aktivieren + add_theme_support( 'custom-background' ); + + register_nav_menus( array( + 'primary' => __( 'Hauptmenü', 'minecraft-modern-theme' ), + 'footer' => __( 'Footer-Menü', 'minecraft-modern-theme' ), + ) ); + add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); +} +add_action( 'after_setup_theme', 'minecraft_modern_setup' ); + +// === Styles & Scripts laden === +function minecraft_modern_scripts() { + // Haupt-Stylesheet + wp_enqueue_style( 'minecraft-modern-style', get_stylesheet_uri() ); + + // Swiper.js CSS (von CDN) + wp_enqueue_style( 'swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css' ); + + // JavaScript für den Header-Scroll-Effekt + wp_enqueue_script( + 'minecraft-modern-header-script', + get_template_directory_uri() . '/js/header-scroll.js', + array(), + '1.0', + true + ); + + // Swiper.js JS (von CDN) + wp_enqueue_script( + 'swiper-js', + 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js', + array(), + '8.0.0', + true + ); + + // Unsere eigene Slider-Initialisierungs-Datei + wp_enqueue_script( + 'minecraft-modern-slider-script', + get_template_directory_uri() . '/js/slider-init.js', + array('swiper-js'), // Hängt von Swiper.js ab + '1.0', + true + ); + + // NEU: Theme-Toggle-Skript laden + wp_enqueue_script( + 'theme-toggle-script', + get_template_directory_uri() . '/js/theme-toggle.js', + array(), // Keine Abhängigkeiten + '1.0', + true + ); + + // FAQ Skript laden, wenn der Post-Type aktiv ist + if ( post_type_exists('faq') ) { + wp_enqueue_script( + 'faq-accordion-script', + get_template_directory_uri() . '/js/faq-accordion.js', + array(), + '1.0', + true + ); + } + + // Übergebe ALLE Theme-Einstellungen an das JavaScript + // KORREKTUR: Der Objektname muss 'sliderSettings' bleiben, damit slider-init.js funktioniert. + wp_localize_script( + 'minecraft-modern-slider-script', + 'sliderSettings', + array( + 'hideArrows' => get_theme_mod( 'slider_hide_arrows', false ) ? '1' : '0', + 'hidePagination' => get_theme_mod( 'slider_hide_pagination', false ) ? '1' : '0', + 'defaultMode' => get_theme_mod( 'default_theme_mode', 'dark' ), + 'ajax_url' => admin_url('admin-ajax.php') + ) + ); + + // === NEU & WICHTIG: Header-Skript-Informationen übergeben === + // Dies verhindert das Flackern im Customizer. + wp_localize_script( + 'minecraft-modern-header-script', // <-- Richtiges Skript-Handle! + 'headerSettings', // <-- Neuer Objektname für Klarheit + array( + 'isCustomizer' => is_customize_preview() + ) + ); +} +add_action( 'wp_enqueue_scripts', 'minecraft_modern_scripts' ); + +// === Customizer-Datei laden === +require get_template_directory() . '/inc/customizer.php'; + +// === Footer-Widgets registrieren === +function minecraft_modern_footer_widgets() { + register_sidebar( array( + 'name' => __( 'Footer Links', 'minecraft-modern-theme' ), + 'id' => 'footer-left', + 'description' => __( 'Widget-Bereich links im Footer.', 'minecraft-modern-theme' ), + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', + ) ); + for ( $i = 1; $i <= 3; $i++ ) { + register_sidebar( array( + 'name' => sprintf( __( 'Footer Spalte %d', 'minecraft-modern-theme' ), $i ), + 'id' => 'footer-' . $i, + 'description' => sprintf( __( 'Widget für die %d. Spalte im Footer.', 'minecraft-modern-theme' ), $i ), + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', + ) ); + } + register_sidebar( array( + 'name' => __( 'Footer Rechts', 'minecraft-modern-theme' ), + 'id' => 'footer-right', + 'description' => __( 'Widget-Bereich rechts im Footer.', 'minecraft-modern-theme' ), + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', + ) ); +} +add_action( 'widgets_init', 'minecraft_modern_footer_widgets' ); + +// === FAQ Custom Post Type & Taxonomy === +function create_faq_post_type() { + // Nur registrieren, wenn im Customizer aktiviert + if ( get_theme_mod( 'faq_enabled', true ) ) { + register_post_type('faq', + array( + 'labels' => array( + 'name' => __( 'FAQs', 'minecraft-modern-theme' ), + 'singular_name' => __( 'FAQ', 'minecraft-modern-theme' ), + 'add_new' => __( 'Neue FAQ hinzufügen', 'minecraft-modern-theme' ), + 'add_new_item' => __( 'Neue FAQ hinzufügen', 'minecraft-modern-theme' ), + 'edit_item' => __( 'FAQ bearbeiten', 'minecraft-modern-theme' ), + 'new_item' => __( 'Neue FAQ', 'minecraft-modern-theme' ), + 'view_item' => __( 'FAQ ansehen', 'minecraft-modern-theme' ), + 'search_items' => __( 'FAQs durchsuchen', 'minecraft-modern-theme' ), + 'not_found' => __( 'Keine FAQs gefunden', 'minecraft-modern-theme' ), + 'not_found_in_trash' => __( 'Keine FAQs im Papierkorb gefunden', 'minecraft-modern-theme' ), + 'all_items' => __( 'Alle FAQs', 'minecraft-modern-theme' ), + ), + 'public' => true, + 'has_archive' => true, // Archiv-Seite /faq/ bleibt als Fallback + 'menu_icon' => 'dashicons-format-chat', + 'supports' => array( 'title', 'editor', 'page-attributes' ), + 'rewrite' => array( 'slug' => 'faq' ), + 'show_in_rest' => true, + ) + ); + register_taxonomy( + 'faq_category', + 'faq', + array( + 'label' => __( 'FAQ Kategorien', 'minecraft-modern-theme' ), + 'rewrite' => array( 'slug' => 'faq-kategorie' ), + 'hierarchical' => true, + 'show_in_rest' => true, + ) + ); + } +} +add_action('init', 'create_faq_post_type'); + + +// ============================================================================= +// NEU: Automatische FAQ-Seitenerstellung und Template-Zuweisung +// ============================================================================= + +/** + * Erstellt automatisch eine "FAQ" Seite, wenn die FAQ-Funktion aktiviert wird. + */ +function create_faq_page_automatically() { + // Prüfen, ob die FAQ-Funktion aktiv ist + if ( get_theme_mod( 'faq_enabled', true ) ) { + // Prüfen, ob die Seite bereits existiert + if ( get_page_by_title( 'FAQ' ) == null ) { + // Seite erstellen + $new_page = array( + 'post_title' => 'FAQ', + 'post_content' => 'Diese Seite zeigt alle FAQs an. Der Inhalt wird automatisch generiert.', + 'post_status' => 'publish', + 'post_type' => 'page', + 'post_author' => 1, + ); + // Seite in die Datenbank einfügen + wp_insert_post( $new_page ); + } + } +} +// Diese Funktion wird ausgeführt, wenn der Customizer gespeichert wird. +add_action( 'customize_save_after', 'create_faq_page_automatically' ); + + +/** + * Leitet Anfragen für die "FAQ" Seite auf unser spezielles Template um. + */ +function load_faq_page_template( $template ) { + // Prüfen, ob die FAQ-Funktion aktiv ist + if ( get_theme_mod( 'faq_enabled', true ) ) { + // Prüfen, ob wir uns auf einer Seite befinden + if ( is_page() ) { + global $post; + // Prüfen, ob der Titel der Seite "FAQ" ist + if ( $post && $post->post_title == 'FAQ' ) { + // Pfad zu unserem Template zurückgeben + return get_template_directory() . '/archive-faq.php'; + } + } + } + // Standard-Template in allen anderen Fällen + return $template; +} +add_filter( 'template_include', 'load_faq_page_template' ); \ No newline at end of file diff --git a/Minecraft-Modern-Theme/header.php b/Minecraft-Modern-Theme/header.php new file mode 100644 index 0000000..bce3053 --- /dev/null +++ b/Minecraft-Modern-Theme/header.php @@ -0,0 +1,67 @@ + +> + + + + + + +> + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/index.php b/Minecraft-Modern-Theme/index.php new file mode 100644 index 0000000..c84ee78 --- /dev/null +++ b/Minecraft-Modern-Theme/index.php @@ -0,0 +1,29 @@ + + +
+
+
+ + +
> + +
+ +
+ +
+

+
+ +
+
+
+ + +

+ +
+
+
+ + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/page.php b/Minecraft-Modern-Theme/page.php new file mode 100644 index 0000000..dec214a --- /dev/null +++ b/Minecraft-Modern-Theme/page.php @@ -0,0 +1,20 @@ + + +
+
+
+ +
> +
+

+
+ +
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/single-faq.php b/Minecraft-Modern-Theme/single-faq.php new file mode 100644 index 0000000..06ed307 --- /dev/null +++ b/Minecraft-Modern-Theme/single-faq.php @@ -0,0 +1,19 @@ + + +
+
+ +
> +
+

+ ← +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/single.php b/Minecraft-Modern-Theme/single.php new file mode 100644 index 0000000..aef3f81 --- /dev/null +++ b/Minecraft-Modern-Theme/single.php @@ -0,0 +1,20 @@ + + +
+
+
+ +
> +
+

+
+ +
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/Minecraft-Modern-Theme/style.css b/Minecraft-Modern-Theme/style.css new file mode 100644 index 0000000..e60959b --- /dev/null +++ b/Minecraft-Modern-Theme/style.css @@ -0,0 +1,579 @@ +/* +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.0 +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: 15px 0; + 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; + justify-content: space-between; + align-items: center; +} + +.site-branding { + display: flex; + align-items: center; + gap: 15px; +} + +.custom-logo-link img, .custom-logo { + max-height: 60px; + 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; +} + +.main-navigation { + flex-grow: 1; + text-align: center; +} +.main-navigation ul { + list-style: none; + margin: 0; + padding: 0; + display: inline-flex; + gap: 30px; +} +.main-navigation a { + font-size: 15px; + font-weight: 600; + color: var(--text-muted); + padding: 5px 0; + transition: color 0.2s; +} +.main-navigation a:hover { + color: var(--primary-accent); +} + +.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; +} +.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; +} +.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 === */ +.site-footer { + background-color: var(--surface-color); + padding: 20px 0; + border-top: 1px solid var(--border-color); + flex-shrink: 0; /* WICHTIG: Verhindert, dass der Footer schrumpft */ +} + +.site-footer { + line-height: 1.4; + font-size: 13px; +} + +.footer-widgets-container { + /* Dieser Container ist jetzt nur noch ein Wrapper */ + margin-bottom: 15px; +} + +.footer-widgets { + /* <<< HIER IST DIE KORREKTE LÖSUNG: */ + display: flex; + justify-content: space-between; /* Platziert 1 links, 3 rechts, 2 in der Mitte */ + align-items: flex-start; + gap: 40px; /* Gleichmäßiger Abstand zwischen den Widgets */ +} + +/* NEUE REGEL: Zieht das dritte Widget nach links */ +.footer-widget:last-child { + margin-right: -0px; /* <<< HIER ANGEPASST: Erhöhter negativer Wert */ +} + +.footer-widget .widget-title { + font-size: 15px; + color: var(--primary-accent); + margin-bottom: 10px; + font-weight: 700; +} + +.footer-navigation { + text-align: center; + padding: 10px 0; + border-top: 1px solid var(--border-color); + margin-bottom: 5px; +} +.footer-menu { + list-style: none; + margin: 0; + padding: 0; + display: inline-flex; + align-items: center; + gap: 15px; +} +.footer-menu a { + color: var(--text-muted); + font-weight: 400; + transition: color 0.2s; +} +.footer-menu a:hover { color: var(--primary-accent); } + +.site-info { + text-align: center; + padding-top: 10px; + border-top: 1px solid var(--border-color); + color: var(--text-muted); + margin: 0; +} +.site-info .footer-credit { + font-size: 0.8em; + opacity: 0.8; + color: #aaaaaa; +} + +.footer-legal-links { + text-align: center; + margin-top: 10px; + font-size: 14px; +} +.footer-legal-links a { + color: #888; + text-decoration: none; + transition: color 0.3s ease; +} +.footer-legal-links a:hover { color: #ccc; } + +/* === 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 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 */ +} + +/* === THEME TOGGLE === */ +.theme-toggle { + position: fixed; + left: 20px; + bottom: 20px; + 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; + position: relative; + overflow: hidden; +} +.theme-toggle:hover { + border-color: var(--primary-accent); + box-shadow: 0 0 25px rgba(0,212,255,0.5); +} +html.light-mode .theme-toggle { box-shadow: 0 4px 20px rgba(0,0,0,0.15); } + +.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); +} +html.light-mode .theme-toggle::before { + transform: translateX(34px); + background: linear-gradient(135deg, #ffd700, #ffaa00); +} + +.theme-toggle-icons { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6px; + position: relative; + z-index: 1; +} +.icon-moon, .icon-sun { + width: 18px; + height: 18px; + transition: all 0.3s ease; + flex-shrink: 0; +} +.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); } + +/* === 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; } + + +/* === RESPONSIVE DESIGN === */ +@media (max-width: 768px) { + /* Header */ + .header-main { flex-direction: column; gap: 15px; } + .main-navigation ul { gap: 20px; } + .custom-logo-link img, .custom-logo { max-height: 50px; } + + /* Hero */ + .hero-title, .slider-title { font-size: 32px; } + .hero-subtitle, .slider-subtitle { font-size: 18px; } + .hero-buttons a { display: block; margin: 10px auto; width: 80%; } + + /* Footer */ + .footer-widgets { + /* Auf mobilen Geräten das Layout ändern */ + flex-direction: column; + gap: 20px; + align-items: center; + } + .footer-widget:last-child { + margin-right: 0; /* Negativen Margin für mobile Ansicht zurücksetzen */ + } + .footer-menu { flex-direction: column; gap: 10px; } + + /* Theme Toggle */ + .theme-toggle { + width: 60px; + height: 32px; + left: 15px; + 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; } +} \ No newline at end of file