/* =========================================================
   Putzig Leistungen Cards
   Bootstrap 5.3 kompatibel
========================================================= */

:root {
   --putzig-service-bg: rgb(224, 224, 224);
   --putzig-service-card-bg: #FFF;
   --putzig-service-bg-icon:#FFF;
}

[data-theme="dark"] {
   --putzig-service-bg: #212529;
   --putzig-service-card-bg: #212529;
   --putzig-service-bg-icon:#212529;
}


/* =========================================================
   Grundbereich
========================================================= */

#putzig-service {
    scroll-margin-top: 250px;
}

.putzig-services {
    position: relative;
    background: var(--putzig-service-bg);
}


/* Kleine rote Überschrift */
.putzig-services-kicker {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--putzig-red);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}


/* Hauptüberschrift */
.putzig-services-title {
    margin: 0;
    color: var(--putzig-dark);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}


/* =========================================================
   Cards
========================================================= */

.putzig-service-card {
    position: relative;
    display: block;
    height: 100%;
    overflow: visible;
    background-color: var(--putzig-service-card-bg);
    border: 1px solid #FFF;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* =========================================================
   Card als kompletter Link
   Verhindert, dass <a>-Styles die Card optisch verändern
========================================================= */

.putzig-services a.putzig-service-card,
.putzig-services a.putzig-service-card:visited,
.putzig-services a.putzig-service-card:hover,
.putzig-services a.putzig-service-card:focus,
.putzig-services a.putzig-service-card:active {
    color: inherit;
    text-decoration: none;
}


/* Zusätzliche Klasse für Link-Cards */
.putzig-service-card--link {
    cursor: pointer;
}


/* Verhindert Unterstreichungen auf allen Card-Inhalten */
.putzig-service-card--link *,
.putzig-service-card--link:hover *,
.putzig-service-card--link:focus * {
    text-decoration: none;
}


/* Sauberer Tastatur-Fokus für Barrierefreiheit */
.putzig-service-card--link:focus-visible {
    outline: 3px solid rgba(227, 6, 19, 0.28);
    outline-offset: 5px;
}


/* Wenn der Browser einen Standard-Fokus setzt, nicht doppelt anzeigen */
.putzig-service-card--link:focus:not(:focus-visible) {
    outline: none;
}


/* Bildbereich */
.putzig-service-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 2.55;
    background-color: #dddddd;
}


/* Bild */
.putzig-service-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.45s ease;
}


/* Textbereich */
.putzig-service-card__body {
    position: relative;
    padding: 2.35rem 1.15rem 1.45rem;
    text-align: center;
}


/* Rundes Icon */
.putzig-service-card__icon {
    position: absolute;
    top: 0;
    left: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;

    background-color: var(--putzig-service-bg-icon);
    border-radius: 50%;

    box-shadow: 0 10px 24px var(--putzig-shadow);

    transform: translate(-50%, -50%);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Icon-Bild */
.putzig-service-card__icon img {
    display: block;
    width: 65px;
    height: 65px;
    object-fit: contain;
}


/* Card-Titel */
.putzig-service-card__title {
    margin: 0 0 0.65rem;
    color: var(--putzig-dark);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}


/* Card-Text */
.putzig-service-card__text {
    max-width: 230px;
    margin: 0 auto;
    color: var(--putzig-text);
    font-weight: 500;
    line-height: 1.55;
}


/* Sicherstellen, dass Link-Hover die Textfarben nicht überschreibt */
.putzig-service-card--link:hover .putzig-service-card__title,
.putzig-service-card--link:focus .putzig-service-card__title,
.putzig-service-card--link:active .putzig-service-card__title {
    color: var(--putzig-dark);
}


.putzig-service-card--link:hover .putzig-service-card__text,
.putzig-service-card--link:focus .putzig-service-card__text,
.putzig-service-card--link:active .putzig-service-card__text {
    color: var(--putzig-text);
}


/* =========================================================
   Card Hover
========================================================= */

.putzig-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(227, 6, 19, 0.22);
    box-shadow: 0 18px 45px var(--putzig-shadow);
}


.putzig-service-card:hover .putzig-service-card__image img {
    transform: scale(1.06);
}


.putzig-service-card:hover .putzig-service-card__icon {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 14px 30px rgba(227, 6, 19, 0.18);
}


/* =========================================================
   Weitere Cards über Bootstrap Collapse
========================================================= */

.putzig-services-more {
    width: 100%;
}


/* Weitere Cards zentriert darstellen */
.putzig-services-more .row {
    justify-content: center;
}


/* Bootstrap Collapse Animation etwas weicher */
.putzig-services-more.collapsing {
    transition: height 0.35s ease;
}


/* =========================================================
   Button
========================================================= */

.putzig-services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.25rem;

    min-height: 48px;
    padding: 0.85rem 1.35rem;

    color: #fff;
    background-color: #D80100;

    border: 1px solid var(--putzig-red);
    border-radius: 0;

    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 3px;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Button Hover und Fokus */
.putzig-services-btn:hover,
.putzig-services-btn:focus {
    color: #fff;
    background-color: #D80100;
    border-color: #D80100;

    transform: translateY(-2px);

    box-shadow: 0 14px 30px var(--putzig-shadow-red);
}


/* Sauberer Tastatur-Fokus */
.putzig-services-btn:focus-visible {
    outline: 3px solid rgba(227, 6, 19, 0.28);
    outline-offset: 4px;
}


/* =========================================================
   Button Textwechsel
========================================================= */

/* Standard: "Weniger anzeigen" ausblenden */
.putzig-services-btn__hide {
    display: none;
}


/* Wenn Collapse geöffnet ist: "Alle Leistungen ansehen" ausblenden */
.putzig-services-btn[aria-expanded="true"] .putzig-services-btn__show {
    display: none;
}


/* Wenn Collapse geöffnet ist: "Weniger anzeigen" einblenden */
.putzig-services-btn[aria-expanded="true"] .putzig-services-btn__hide {
    display: inline;
}


/* =========================================================
   Button Chevron Animation
   Wichtig: Wrapper drehen, nicht direkt Font Awesome
========================================================= */

.putzig-services-btn__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 0.45rem;

    line-height: 1;

    transform: rotate(0deg);
    transform-origin: center;

    transition:
        transform 0.25s ease;
}


/* Font-Awesome-Icon im Wrapper */
.putzig-services-btn__chevron i {
    display: inline-block;
    line-height: 1;
}


/* Wenn Collapse geöffnet ist: Chevron nach oben drehen */
.putzig-services-btn[aria-expanded="true"] .putzig-services-btn__chevron {
    transform: rotate(180deg);
}


/* =========================================================
   Responsive Feinschliff
========================================================= */

/* Tablet */
@media (max-width: 991.98px) {
    .putzig-service-card__body {
        padding-top: 2.25rem;
    }
}


/* Smartphone */
@media (max-width: 575.98px) {
    .putzig-services {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .putzig-services-kicker {
        font-size: 0.85rem;
    }

    .putzig-services-title {
        font-size: clamp(1.65rem, 8vw, 2.1rem);
    }

    .putzig-service-card__body {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .putzig-service-card__icon {
        width: 58px;
        height: 58px;
    }

    .putzig-service-card__icon img {
        width: 30px;
        height: 30px;
    }

    .putzig-services-btn {
        width: 100%;
        max-width: 320px;
    }
}