/* ==========================================================================
   SECTION ANFRAGE (KONTAKT- & CANAL-ENGINE)
   ========================================================================== */

/* Linker Bereich: Oben bündig ausgerichtet */
.designservice-cta-vertical {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Symmetrie-Fix: Erzwingt links und rechts exakt denselben Abstand unter der H3 */
.designservice-cta-vertical h3,
.anfrage-contact-stack h3 {
    margin-bottom: 10px !important;
}

/* Symmetrie-Fix: Vereinheitlicht den Abstand unter der Subline */
.designservice-cta-vertical .h3-sub,
.anfrage-contact-stack .h3-sub {
    margin-bottom: 30px !important;
}

/* Rechter Inhaltsbereich ohne vererbtes Gap auf die Headlines */
.anfrage-contact-stack {
    display: flex;
    flex-direction: column;
}

/* FIX: Das Gap wirkt jetzt exklusiv und sauber NUR zwischen den Kacheln */
.anfrage-boxes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Abstand unter dem Einleitungstext links bis zum großen CTA-Button */
.anfrage-intro-paragraph {
    margin-bottom: 40px !important;
}

/* Einheitliches, kompaktes Padding für alle Kontaktkacheln */
.anfrage-box-padding {
    padding: 25px !important;
    gap: 25px !important;
}

/* Typografie-Korrekturen für die kompakten Kontakt-Kacheln */
.anfrage-box-padding .flexbox-col-button-textarea-headline {
    font-size: 24px;
    margin-bottom: 5px;
}

.anfrage-box-padding .flexbox-col-button-textarea-text {
    font-size: 18px;
    margin-bottom: 0;
}


/* ==========================================================================
   HOVER- & GLOW-LOGIK FÜR DIE LILA NAVIGATION-BOX
   ========================================================================== */

/* Basis-Zustand für die Google-Maps-Box */
.bg-brand-lila {
    background-color: var(--meinmaturaball-lila);
    transition: background-color 0.8s ease, box-shadow 0.8s ease;
}

/* Hover-Zustand: Invertierung auf Darklila & satter violetter Außen-Glow */
.bg-brand-lila:hover {
    background-color: var(--meinmaturaball-darklila);
    box-shadow: 0 0 30px rgba(127, 60, 141, 0.6);
}

/* Farbwechsel der Schrift beim Hovern analog zu den anderen Boxen */
.bg-brand-lila:hover .flexbox-col-button-textarea-headline,
.bg-brand-lila:hover .flexbox-col-button-textarea-hinweis {
    color: var(--meinmaturaball-lila);
}

/* Dezente Farbanpassung des diagonalen Shimmers im Hover-Zustand */
.bg-brand-lila:hover::before {
    background: linear-gradient(
        90deg, 
        rgba(127, 60, 141, 0) 0%, 
        rgba(127, 60, 141, 0.2) 50%, 
        rgba(127, 60, 141, 0) 100%
    );
}

/* ==========================================================================
   RESPONSIVE LAYOUT
   ========================================================================== */

@media (max-width: 600px) {
	.flexbox-col-button-textarea-headline {
	  font-size: 20px !important;
	  margin-bottom: 4px !important;
	}
	.flexbox-col-button-textarea-text {
	font-size: 16px !important;
}
}