/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

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

body {
    background: #1a1a1a;
    /* dunkler Hintergrund statt weiß */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="shine" cx="50%" cy="50%"><stop offset="0%" stop-color="%2343b0f1" stop-opacity="0.3"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23shine)" opacity="0.5"><animate attributeName="cx" values="200;800;200" dur="8s" repeatCount="indefinite"/></circle><circle cx="800" cy="600" r="150" fill="url(%23shine)" opacity="0.3"><animate attributeName="cy" values="600;200;600" dur="10s" repeatCount="indefinite"/></circle></svg>');
    animation: float 20s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.hero-content {
    z-index: 2;
    position: relative;
    max-width: 800px;
    padding: 0 20px;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #fff, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 20px rgba(52, 152, 219, 0.5));
    }

    to {
        filter: drop-shadow(0 0 30px rgba(52, 152, 219, 0.8));
    }
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, #4834d4, #43b0f1);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(72, 52, 212, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(72, 52, 212, 0.4);
}

nav {
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 15px 0;
    transition: all 0.3s ease;
}


nav.scrolled {
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #43b0f1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo::before {
    content: '◆';
    color: #686de0;
    font-size: 1.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #4834d4;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover {
    color: #4834d4;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #2c3e50;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, #4834d4, #686de0);
}

.services {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.service-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(45deg, #4834d4, #686de0);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(72, 52, 212, 0.2);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
    background: linear-gradient(45deg, #4834d4, #686de0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #2c3e50;
}

.service-card ul {
    list-style: none;
    margin-top: 15px;
}

.service-card li {
    padding: 5px 0;
    position: relative;
    padding-left: 20px;
}

.service-card li.has-check strong::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4834d4;
    font-weight: bold;
}

.service-card h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #4834d4;
    font-size: 1.2rem;
}

.price-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.price-table th,
.price-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
}

.price-table th {
    background: #f8f9fa;
    color: #2c3e50;
}


.about {
    background: white;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.about-image {
    text-align: center;
    position: relative;
}

.about-placeholder {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #4834d4, #686de0);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 10px 30px rgba(72, 52, 212, 0.3);
}

.contact {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
}

.contact .section-title {
    color: white;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 60px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
}

.contact-icon {
    font-size: 1.5rem;
    color: #4834d4;
}

.contact-form {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(72, 52, 212, 0.3);
}

.submit-btn {
    background: linear-gradient(45deg, #4834d4, #686de0);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(72, 52, 212, 0.3);
}

footer {
    background: #1a1a1a;
    color: white;
    padding: 40px 0;
    text-align: center;
}

.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        gap: 20px;
        background: rgba(0, 0, 0, 0.95);
        position: absolute;
        top: 60px;
        /* Höhe deiner Nav-Bar */
        right: 0;
        left: 0;
        padding: 20px;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .about-content,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    animation: bounce 2s infinite;
}

/* Einheitliches Styling für Inputs und Select */
.form-control,
.wpcf7 select {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    appearance: none;
    /* Standard-Pfeil verstecken */
}

/* Größer und moderner bei Fokus */
.form-control:focus,
.wpcf7 select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(72, 52, 212, 0.3);
}

/* Custom Dropdown-Pfeil */
.wpcf7 select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%234834d4' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* für mobile Ansicht */
    gap: 20px;
}

.footer-left {
    display: flex;
    gap: 15px;
}

.footer-btn {
    display: inline-block;
    background: linear-gradient(45deg, #4834d4, #686de0);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.footer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(72, 52, 212, 0.3);
}

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

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-right {
        text-align: center;
    }
}

#services-title {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#services-title.hidden {
    opacity: 0;
    transform: translateY(-20px);
}

/* Extras-Karte soll über die ganze Breite gehen */
.extras-card {
    grid-column: 1 / -1;
}

/* Extras Liste */
.extras-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.extras-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.95rem;
}

.extras-list input[type="checkbox"] {
    accent-color: #4834d4;
    /* schönes Lila wie bei deinem Design */
    width: 18px;
    height: 18px;
}

.extras-list label:hover {
    background: #eef0ff;
    border-color: #4834d4;
}

.custom-multiselect .dropdown {
    position: relative;
}

.custom-multiselect .dropdown-toggle {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
}

.custom-multiselect .dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    z-index: 1000;
}

.custom-multiselect .dropdown-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
}

.custom-multiselect .dropdown-menu input[type="checkbox"] {
    accent-color: #4834d4;
}

.custom-multiselect .dropdown-menu label:hover {
    background: #f0f2ff;
}

.custom-multiselect .dropdown-toggle {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    color: #333;
    /* dunkle Schrift */
}

.custom-multiselect .dropdown-menu {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    z-index: 1000;
    color: #333;
    /* dunkle Schrift */
}

.custom-multiselect .dropdown-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    color: #333;
    /* dunkle Schrift für jede Option */
}

.custom-multiselect .dropdown-menu label:hover {
    background: #f0f2ff;
}

/* Grid für Extras */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

/* Einzelne Checkbox-Optionen */
.extras-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.95rem;
    color: #333;
}

/* Checkbox selbst */
.extras-grid input[type="checkbox"] {
    accent-color: #4834d4;
    /* gleiche Farbe wie dein Design */
    width: 18px;
    height: 18px;
}

/* Hover-Effekt */
.extras-grid label:hover {
    background: #eef0ff;
    border-color: #4834d4;
}

.logo svg {
    max-width: 240px;
    width: 100%;
    height: auto;
    transform: scale(1.6);
    /* 1.0 = normal, 1.2 = 20% größer */
    transform-origin: center;
    /* Mittelpunkt bleibt fix */
}

/* Accordion Toggle */
.accordion-toggle {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.accordion-toggle:hover {
    background: #f0f2ff;
    border-color: #4834d4;
}

/* Versteckter Inhalt */
.accordion-content {
    display: none;
    margin-top: 10px;
}

/* Extras Grid bleibt gleich */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.extras-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.extras-grid input[type="checkbox"] {
    accent-color: #4834d4;
    width: 18px;
    height: 18px;
}

.extras-grid label:hover {
    background: #eef0ff;
    border-color: #4834d4;
}

@media (max-width: 1024px) {

    /* Tablet */
    .logo svg {
        max-width: 180px;
        transform: scale(1.1);
    }

    .scroll-indicator {
        bottom: 20px;
    }
}

@media (max-width: 600px) {

    /* Handy */
    .logo svg {
        max-width: 150px;
        transform: scale(1.05);
    }

    .scroll-indicator {
        bottom: 10px;
        font-size: 0.9rem;
        /* etwas kleiner */
    }
}

/* Grundzustand: eine Spalte erzwingen */
.extras-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 90%;
}

.extras-grid .wpcf7-list-item {
    width: 100%;
    max-width: 100%;
}

.extras-grid .wpcf7-list-item {
    display: block !important;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}