.elementor-5663 .elementor-element.elementor-element-366cc6d{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}@media(min-width:768px){.elementor-5663 .elementor-element.elementor-element-366cc6d{--content-width:900px;}}/* Start custom CSS for container, class: .elementor-element-366cc6d *//* 1. DER HAUPT-CONTAINER */
.elementor-5663 .elementor-element.elementor-element-366cc6d {
    --gold: #bf9611;
    --grau: #ebeaeb;
    
    background-color: var(--grau) !important;
    position: relative !important;
    
    /* WICHTIG: Die Höhe muss definiert sein, damit die Mitte berechnet werden kann */
    min-height: 100vh !important; 
    
    /* DIESE 3 ZEILEN ZENTRIEREN DEN SHORTCODE */
    display: flex !important;
    flex-direction: column !important; /* Stapelt Inhalt vertikal */
    justify-content: center !important; /* Zentriert vertikal (Mitte der Höhe) */
    align-items: center !important;     /* Zentriert horizontal (Mitte der Breite) */
    
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. DIE GOLDENE FLÄCHE (Hintergrund-Hälfte) */
.elementor-5663 .elementor-element.elementor-element-366cc6d::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important; /* Endet exakt in der Mitte */
    background-color: var(--gold) !important;
    z-index: 0 !important;
}

/* 3. DER SHORTCODE-BEREICH (DIE KACHEL) */
.elementor-5663 .elementor-element.elementor-element-366cc6d .elementor-widget-shortcode,
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_wrapper {
    position: relative !important;
    z-index: 10 !important; /* Liegt über dem Gold */
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 !important; /* Entfernt Standard-Ränder */
}

/* 1. SEITENTITEL ÜBERALL AUSBLENDEN */
.entry-title, 
.page-title, 
h1.entry-title, 
h1.page-title,
.entry-header {
    display: none !important;
}

/* 2. DEN CONTAINER ANPASSEN */
.elementor-5663 .elementor-element.elementor-element-366cc6d {
    --gold: #bf9611;
    --grau: #ebeaeb;
    
    background-color: var(--grau) !important;
    position: relative !important;
    
    /* Berechnet die Höhe: 100% Bildschirm minus die Navigation oben */
    min-height: calc(100vh - 80px) !important; 
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Vertikale Zentrierung */
    align-items: center !important;     /* Horizontale Zentrierung */
    
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. DIE GOLDENE FLÄCHE */
.elementor-5663 .elementor-element.elementor-element-366cc6d::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important; 
    background-color: var(--gold) !important;
    z-index: 0 !important;
}

/* 4. DIE KACHEL (SHORTCODE) */
.elementor-5663 .elementor-element.elementor-element-366cc6d .elementor-widget-shortcode,
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_wrapper {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 !important;
}

/* --- LOGO INTEGRATION IN DIE KACHEL --- */

/* 1. Platz in der Kachel schaffen */
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_wrapper {
    padding-top: 100px !important; /* Schiebt den Inhalt der Kachel nach unten, um Platz für das Logo zu machen */
    position: relative !important;
}

/* 2. Das Logo als Hintergrundelement einfügen */
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 35px !important; /* Abstand vom oberen Rand der Kachel */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Zentriert das Logo exakt mittig */
    
    /* LOGO DETAILS */
    width: 220px !important; /* Gewünschte Breite des Logos */
    height: 60px !important;  /* Gewünschte Höhe des Logos */
    background-image: url("https://www.papke-consulting.de/wp-content/uploads/2026/01/Signet-Papke-Consulting.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 5 !important;
}

/* 1. KACHEL-DESIGN MIT PLATZ FÜR DAS LOGO */
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_wrapper, 
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_confirmation_wrapper {
    background: #ffffff !important;
    /* 100px oben schafft Platz, damit das Logo nicht in der Schrift hängt */
    padding: 100px 40px 40px 40px !important; 
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    font-family: 'Poppins', sans-serif !important;
    position: relative !important;
    text-align: center !important;
}

/* 2. LOGO POSITIONIERUNG (ABSOLUT) */
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_wrapper::before,
.elementor-5663 .elementor-element.elementor-element-366cc6d .gform_confirmation_wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    /* Das Logo wird fix 30px vom oberen Rand der weißen Kachel platziert */
    top: 30px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    width: 220px !important;
    height: 60px !important;
    background-image: url("https://www.papke-consulting.de/wp-content/uploads/2022/02/Papke-Consulting-rgb.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 10 !important;
}

/* GOLD-FARBE DEFINIEREN */
:root {
    --papke-gold: #bf9611;
}

/* 1. DIE KACHEL-OPTIK FÜR DIE BESTÄTIGUNG */
/* Wir sprechen den äußeren Container an, damit es keine Doppel-Kachel gibt */
.gform_confirmation_wrapper {
    background: #ffffff !important;
    padding: 60px 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    text-align: center !important;
    border: none !important;
}

/* 2. INNERE KACHEL DEAKTIVIEREN (Falls vorhanden) */
.confirmation-container {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 3. TEXT UND BUTTON IN GOLD */
.confirmation-title {
    color: var(--papke-gold) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.confirmation-text {
    font-size: 16px !important;
    color: #444 !important;
    margin-bottom: 30px !important;
}

.confirmation-button {
    display: inline-block !important;
    background-color: var(--papke-gold) !important;
    color: #ffffff !important;
    padding: 15px 35px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.confirmation-button:hover {
    background-color: #a37f0e !important; /* Dunkleres Gold beim Hover */
    transform: translateY(-2px) !important;
}

/* 4. STERNE EBENFALLS AUF GOLD (Falls noch nicht geschehen) */
.gsurvey-rating label {
    stroke: var(--papke-gold) !important;
}

.gsurvey-rating label:hover,
.gsurvey-rating label:hover ~ label,
.gsurvey-rating input:checked ~ label {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23bf9611" stroke="%23bf9611" stroke-width="1.8"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') !important;
}

/* --- BUTTON STYLING FÜR FORMULAR ID 3 --- */

/* 1. ALLE BUTTONS (Grund-Design) */
#gform_submit_button_3,
.gform_next_button,
.gform_previous_button,
.gform_wrapper_3 .gform_footer input[type="submit"],
.gform_wrapper_3 .gform_page_footer input[type="button"] {
    display: inline-block !important;
    padding: 15px 35px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* 2. PRIMÄRE BUTTONS (Vollflächig Gold) */
#gform_submit_button_3,
.gform_next_button,
.gform_wrapper_3 .gform_footer input[type="submit"],
.gform_wrapper_3 .gform_page_footer input[type="button"]:not(.gform_previous_button) {
    background-color: var(--papke-gold) !important;
    color: #ffffff !important;
    border: 2px solid var(--papke-gold) !important;
}

#gform_submit_button_3:hover,
.gform_next_button:hover {
    background-color: #a37f0e !important;
    border-color: #a37f0e !important;
    transform: translateY(-2px) !important;
}

/* 3. ZURÜCK-BUTTON (Nur Umrandung / Ghost Button) */
.gform_previous_button {
    background-color: transparent !important; /* Keine Füllung */
    color: var(--papke-gold) !important;      /* Goldener Text */
    border: 2px solid var(--papke-gold) !important; /* Goldener Rahmen */
}

.gform_previous_button:hover {
    background-color: rgba(191, 150, 17, 0.1) !important; /* Hauchzarter goldener Schimmer beim Hover */
    color: #a37f0e !important;
    border-color: #a37f0e !important;
    transform: translateY(-2px) !important;
}

/* VERHINDERT DAS SPRINGEN BEI SEITENWECHSEL */
.gform_anchor, 
.gform_wrapper_3 .gform_anchor {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fixiert den Viewport, damit beim Laden der neuen Seite nichts ruckelt */
html {
    scroll-behavior: auto !important; /* Deaktiviert smoothes Scrollen, das oft für das Springen verantwortlich ist */
}/* End custom CSS */