/*
 * MWD Core Plugin - Basis-Styles
 */

/* Hält den Google Maps Block im Vordergrund */
.mwd-google-maps-container {
    position: relative;
    z-index: 1;
}

/* --- Styling für die Galerien --- */
.wp-block-mwd-core-image-gallery,
.wp-block-mwd-core-service-gallery,
.wp-block-mwd-core-team-gallery,
.wp-block-mwd-core-testimonial-gallery {
    display: grid;
    gap: 1.5em;
    width: 100%;
}

.wp-block-mwd-core-image-gallery .block-editor-inner-blocks .block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery .block-editor-inner-blocks .block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery .block-editor-inner-blocks .block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery .block-editor-inner-blocks .block-editor-block-list__layout {
    display: grid;
    gap: 1.5em;
}

.wp-block-mwd-core-image-gallery.has-1-columns,
.wp-block-mwd-core-image-gallery.has-1-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery.has-1-columns,
.wp-block-mwd-core-service-gallery.has-1-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery.has-1-columns,
.wp-block-mwd-core-team-gallery.has-1-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery.has-1-columns,
.wp-block-mwd-core-testimonial-gallery.has-1-columns>.block-editor-inner-blocks>.block-editor-block-list__layout {
    grid-template-columns: 1fr;
}

.wp-block-mwd-core-image-gallery.has-2-columns,
.wp-block-mwd-core-image-gallery.has-2-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery.has-2-columns,
.wp-block-mwd-core-service-gallery.has-2-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery.has-2-columns,
.wp-block-mwd-core-team-gallery.has-2-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery.has-2-columns,
.wp-block-mwd-core-testimonial-gallery.has-2-columns>.block-editor-inner-blocks>.block-editor-block-list__layout {
    grid-template-columns: repeat(2, 1fr);
}

.wp-block-mwd-core-image-gallery.has-3-columns,
.wp-block-mwd-core-image-gallery.has-3-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery.has-3-columns,
.wp-block-mwd-core-service-gallery.has-3-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery.has-3-columns,
.wp-block-mwd-core-team-gallery.has-3-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery.has-3-columns,
.wp-block-mwd-core-testimonial-gallery.has-3-columns>.block-editor-inner-blocks>.block-editor-block-list__layout {
    grid-template-columns: repeat(3, 1fr);
}

.wp-block-mwd-core-image-gallery.has-4-columns,
.wp-block-mwd-core-image-gallery.has-4-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery.has-4-columns,
.wp-block-mwd-core-service-gallery.has-4-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery.has-4-columns,
.wp-block-mwd-core-team-gallery.has-4-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery.has-4-columns,
.wp-block-mwd-core-testimonial-gallery.has-4-columns>.block-editor-inner-blocks>.block-editor-block-list__layout {
    grid-template-columns: repeat(4, 1fr);
}

.wp-block-mwd-core-image-gallery.has-5-columns,
.wp-block-mwd-core-image-gallery.has-5-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery.has-5-columns,
.wp-block-mwd-core-service-gallery.has-5-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery.has-5-columns,
.wp-block-mwd-core-team-gallery.has-5-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery.has-5-columns,
.wp-block-mwd-core-testimonial-gallery.has-5-columns>.block-editor-inner-blocks>.block-editor-block-list__layout {
    grid-template-columns: repeat(5, 1fr);
}

.wp-block-mwd-core-image-gallery.has-6-columns,
.wp-block-mwd-core-image-gallery.has-6-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-service-gallery.has-6-columns,
.wp-block-mwd-core-service-gallery.has-6-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-team-gallery.has-6-columns,
.wp-block-mwd-core-team-gallery.has-6-columns>.block-editor-inner-blocks>.block-editor-block-list__layout,
.wp-block-mwd-core-testimonial-gallery.has-6-columns,
.wp-block-mwd-core-testimonial-gallery.has-6-columns>.block-editor-inner-blocks>.block-editor-block-list__layout {
    grid-template-columns: repeat(6, 1fr);
}

.wp-block-mwd-core-gallery-image,
.wp-block-mwd-core-service-item,
.wp-block-mwd-core-team-member,
.wp-block-mwd-core-testimonial-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.wp-block-mwd-core-gallery-image .image-button,
.wp-block-mwd-core-service-item .image-button,
.wp-block-mwd-core-team-member .image-button {
    padding: 0;
    border: none;
    width: 100%;
    height: auto;
    min-height: initial;
    line-height: 0;
    cursor: pointer;
}

.wp-block-mwd-core-gallery-image img,
.wp-block-mwd-core-service-item img,
.wp-block-mwd-core-team-member img {
    width: 100%;
    height: auto;
    display: block;
}

.wp-block-mwd-core-gallery-image .mwd-gallery-image-content,
.wp-block-mwd-core-service-item .mwd-gallery-image-content,
.wp-block-mwd-core-team-member .mwd-team-member-content {
    padding-top: 0.5em;
}

.wp-block-mwd-core-gallery-image figcaption,
.wp-block-mwd-core-team-member .team-member-position {
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    padding: 0.2em 0;
}

.wp-block-mwd-core-gallery-image .image-text,
.wp-block-mwd-core-service-item .service-text,
.wp-block-mwd-core-team-member .team-member-contact {
    font-size: 1em;
    padding: 0;
}

.wp-block-mwd-core-service-item .service-title,
.wp-block-mwd-core-team-member .team-member-name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0.5em 0;
}

.wp-block-mwd-core-service-item .wp-block-button {
    margin-top: 1em;
}

.mwd-team-member-buttons {
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.mwd-team-member-buttons .wp-block-button {
    margin-top: 0;
}

.mwd-team-member-buttons .wp-block-button__link {
    font-size: 0.9em;
}

.wp-block-mwd-core-testimonial-item {
    background-color: #f9f9f9;
    padding: 1.5em;
    border-left: 5px solid #ccc;
}

.wp-block-mwd-core-testimonial-item blockquote {
    margin: 0 0 1em 0;
    font-size: 1.1em;
    font-style: italic;
}

.wp-block-mwd-core-testimonial-item footer {
    text-align: right;
}

.wp-block-mwd-core-testimonial-item .author-name {
    font-weight: bold;
    color: #333;
}

.wp-block-mwd-core-testimonial-item .quote-date {
    font-size: 0.9em;
    color: #777;
    margin-top: 0.25em;
}

.mwd-download-area {
    display: grid;
    gap: 1.5em;
    width: 100%;
}

.mwd-download-area.has-1-columns {
    grid-template-columns: 1fr;
}

.mwd-download-area.has-2-columns {
    grid-template-columns: repeat(2, 1fr);
}

.mwd-download-area.has-3-columns {
    grid-template-columns: repeat(3, 1fr);
}

.mwd-download-area.has-4-columns {
    grid-template-columns: repeat(4, 1fr);
}

.mwd-download-area.has-5-columns {
    grid-template-columns: repeat(5, 1fr);
}

.mwd-download-area.has-6-columns {
    grid-template-columns: repeat(6, 1fr);
}

.mwd-download-item {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.mwd-download-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.mwd-download-content {
    padding: 1em;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mwd-download-title {
    margin-top: 0;
    margin-bottom: 1em;
    flex-grow: 1;
}

.mwd-download-content .wp-block-button__link {
    text-decoration: none;
    background: #333;
    color: #fff;
    padding: 0.5em 1em;
    border-radius: 3px;
    text-align: center;
    align-self: flex-start;
}

.mwd-announcement-banner {
    background-color: #2c3338;
    color: #ffffff;
    width: 100%;
    z-index: 99999;
    /* KORREKTUR: Wir positionieren die Leiste fix am oberen Rand */
    position: fixed;
    /* 'fixed' oder 'sticky' */
    top: 0;
    left: 0;
}

/* Wichtig: Wir fügen einen Abstand zum <body> hinzu, damit die Leiste den Seiteninhalt nicht überdeckt */
body {
    padding-top: 50px;
    /* Dieser Wert sollte ungefähr der Höhe der Leiste entsprechen */
}

/* Wir müssen sicherstellen, dass die Admin-Bar darüber liegt, wenn sie sichtbar ist */
body.admin-bar .mwd-announcement-banner {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .mwd-announcement-banner {
        top: 46px;
    }

    /* Passe den Padding-Top Wert an, wenn die Admin-Bar auf Mobilgeräten höher ist */
    body.admin-bar {
        padding-top: 96px;
        /* Höhe der Admin-Bar + Höhe der Leiste */
    }
}


.mwd-announcement-banner {
    background-color: #2c3338;
    color: #ffffff;
    width: 100%;
    z-index: 999;
    position: relative;
    /* STANDARD: Nicht fixiert */
}

/* Diese Regel greift nur, wenn die Option "Leiste fixieren" aktiv ist */
.mwd-announcement-banner.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    transition: top 0.3s ease;
}

.mwd-announcement-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.8em 1.5em;
    /* Padding etwas reduziert für eine schmalere Leiste */
    text-align: center;
}

/* KORREKTUR: Wir verwenden jetzt die Klasse anstelle des h4-Tags */
.mwd-announcement-headline {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffffff;
}

.mwd-announcement-message p {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

.mwd-announcement-message a {
    color: #90caf9;
    text-decoration: underline;
}

.mwd-sticky-header-enabled .wp-block-template-part.site-header {
    position: sticky;
    top: 0;
    /* Standardposition, wird von JS angepasst */
    z-index: 1000;
    /* Stellt sicher, dass der Header über dem Inhalt liegt */
    width: 100%;
    background-color: white;
    /* Hintergrundfarbe, damit der Inhalt nicht durchscheint */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Optionaler Schatten */
    transition: top 0.3s ease;
}



/* --- Styling für den Slider --- */
.wp-block-mwd-core-slider.swiper-initialized {
    overflow: hidden;
}
.wp-block-mwd-core-slider .swiper-wrapper {
    display: flex;
}
.wp-block-mwd-core-slide {
    background-size: cover;
    background-position: center;
    width: 100%;
    flex-shrink: 0;
    display: flex;
}
.slide-content-wrapper {
    width: 100%;
    padding: 2em;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    background: rgba(0,0,0,0.3);
}
.slide-content {
    color: white;
    max-width: 800px;
}
.placement-top-left { justify-content: flex-start; align-items: flex-start; text-align: left; }
.placement-top-center { justify-content: center; align-items: flex-start; }
.placement-top-right { justify-content: flex-end; align-items: flex-start; text-align: right; }
.placement-middle-left { justify-content: flex-start; align-items: center; text-align: left; }
.placement-middle-center { justify-content: center; align-items: center; }
.placement-middle-right { justify-content: flex-end; align-items: center; text-align: right; }
.placement-bottom-left { justify-content: flex-start; align-items: flex-end; text-align: left; }
.placement-bottom-center { justify-content: center; align-items: flex-end; }
.placement-bottom-right { justify-content: flex-end; align-items: flex-end; text-align: right; }
.slide-headline {
    font-size: 2.5em;
    font-weight: bold;
    margin: 0 0 0.5em 0;
}
.slide-text {
    font-size: 1.2em;
    line-height: 1.6;
}
.slide-content .wp-block-button {
    margin-top: 1.5em;
}
.swiper-slide-active .animation-fade-in { animation: fadeIn 1s ease-out forwards; }
.swiper-slide-active .animation-slide-in-up { animation: slideInUp 1s ease-out forwards; }
.swiper-slide-active .animation-zoom-in { animation: zoomIn 0.8s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.mwd-slide-editor-preview {
    min-height: 250px;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mwd-slide-editor-preview .slide-content-preview {
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 1em;
    text-align: center;
    width: 80%;
}
.wp-block-mwd-core-slider .swiper-button-prev,
.wp-block-mwd-core-slider .swiper-button-next {
    color: #ffffff;
    --swiper-navigation-size: 30px;
}
.wp-block-mwd-core-slider .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.7;
}
.wp-block-mwd-core-slider .swiper-pagination-bullet-active {
    background: #00C4B4;
    opacity: 1;
}







/* Styling für den Font Awesome Icon Container im Service-Item */
.wp-block-mwd-core-service-item .service-item-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1em;
    aspect-ratio: 4 / 3; /* Sorgt für eine proportionale Höhe, passen Sie das Verhältnis bei Bedarf an */
    background-color: #f0f0f0; /* Eine leichte Hintergrundfarbe, optional */
    border-radius: 4px; /* Abgerundete Ecken, optional */
}

/* Die Icon-Größe. fa-3x ist ein guter Startpunkt, kann aber angepasst werden. */
.wp-block-mwd-core-service-item .service-item-icon-wrapper i {
    color: #333; /* Passen Sie die Icon-Farbe bei Bedarf an */
}

/* Stil für die Icon-Vorschau im Editor */
.wp-block-mwd-core-service-item .service-item-icon-preview {
    margin-bottom: 1em;
    text-align: center;
    padding: 2em;
    background-color: #f6f7f7;
    color: #555d66;
}


/* Stile für den MWD Icon Block */
.wp-block-mwd-core-icon {
    padding: 1em; /* Fügt einen kleinen Innenabstand hinzu */
}

/**
 * MWD Core - Frontend Animations
 */

/*
 * Dies ist die Vorbereitungsklasse.
 * Jedes Element, das animiert werden soll, wird standardmäßig durchsichtig
 * und leicht nach oben verschoben. Wichtig: Es bleibt im Layout und
 * belegt seinen Platz, um ein Springen der Seite (CLS) zu verhindern.
 * Der Übergang (transition) definiert, dass jede Änderung 0.6 Sekunden dauert.
*/
.mwd-scroll-animate {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/*
 * Diese Klasse wird per JavaScript hinzugefügt, sobald das Element
 * in den sichtbaren Bereich des Browsers scrollt.
 * Sie macht das Element vollständig sichtbar und schiebt es an seine
 * endgültige Position. Die in .mwd-scroll-animate definierte
 * 'transition' sorgt für die sanfte Animation.
*/
.mwd-scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}