/* ==========================================================
   SOBARO – Veranstaltungskarten
   Joomla 6 / Astroid Framework
========================================================== */


/* Gesamtes Kartenraster */

.sobaro-event-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
    padding: 10px 0;
}


/* Einzelne Karte */

.sobaro-event-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-width: 0;
    min-height: 260px;

    padding: 30px 22px 24px;

    background: #ffffff;

    border: 1px solid #e8edf3;
    border-radius: 20px;

    color: #0a2f6f;
    text-align: center;
    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(10, 47, 111, 0.07);

    overflow: hidden;

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


/* Joomla- oder Template-Linkstile überschreiben */

.sobaro-event-card,
.sobaro-event-card:visited,
.sobaro-event-card:hover,
.sobaro-event-card:focus,
.sobaro-event-card:active {
    text-decoration: none;
}


.sobaro-event-card:hover {
    color: #0a2f6f;

    transform: translateY(-7px);

    box-shadow:
        0 18px 38px rgba(10, 47, 111, 0.14);
}


.sobaro-event-card:focus-visible {
    outline: 3px solid rgba(46, 134, 222, 0.35);
    outline-offset: 4px;
}


/* Icon-Kreis */

.sobaro-event-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 92px;
    height: 92px;

    margin: 0 auto 22px;

    border-radius: 50%;

    background: #f7f9fc;

    box-shadow:
        0 7px 20px rgba(10, 47, 111, 0.10);

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


/* Eigene PNG-Icons */

.sobaro-event-icon img {
    display: block;

    width: 64px;
    height: 64px;

    max-width: 72%;
    max-height: 72%;

    object-fit: contain;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


/* Hover-Effekt Icon */

.sobaro-event-card:hover .sobaro-event-icon {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(10, 47, 111, 0.15);
}


.sobaro-event-card:hover .sobaro-event-icon img {
    transform: scale(1.08) rotate(-3deg);

    filter:
        drop-shadow(0 7px 8px rgba(0, 0, 0, 0.12));
}


/* Überschrift */

.sobaro-event-title {
    display: block;

    min-height: 48px;
    margin-bottom: 12px;

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;

    color: #0a2f6f;
}


/* Beschreibung */

.sobaro-event-text {
    display: block;

    margin-bottom: 22px;

    font-family:
        "Nunito",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;

    color: #53657c;
}


/* Farbiger Strich am unteren Rand */

.sobaro-event-line {
    display: block;

    width: 38px;
    height: 4px;

    margin-top: auto;

    border-radius: 20px;

    transition:
        width 0.25s ease,
        transform 0.25s ease;
}


.sobaro-event-card:hover .sobaro-event-line {
    width: 62px;
}


/* ==========================================================
   Kartenfarben
========================================================== */


/* Kindergeburtstag */

.event-red .sobaro-event-icon {
    background:
        linear-gradient(135deg,
            rgba(230, 41, 47, 0.14),
            rgba(230, 41, 47, 0.04));
}

.event-red .sobaro-event-line {
    background: #e6292f;
}

.event-red:hover {
    border-color: rgba(230, 41, 47, 0.30);

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fff7f7 100%);
}


/* Kindergarten & Schule */

.event-blue .sobaro-event-icon {
    background:
        linear-gradient(135deg,
            rgba(46, 134, 222, 0.15),
            rgba(46, 134, 222, 0.04));
}

.event-blue .sobaro-event-line {
    background: #2e86de;
}

.event-blue:hover {
    border-color: rgba(46, 134, 222, 0.30);

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f5faff 100%);
}


/* Firmenfeier */

.event-yellow .sobaro-event-icon {
    background:
        linear-gradient(135deg,
            rgba(255, 201, 40, 0.22),
            rgba(255, 201, 40, 0.05));
}

.event-yellow .sobaro-event-line {
    background: #ffc928;
}

.event-yellow:hover {
    border-color: rgba(255, 201, 40, 0.40);

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fffdf3 100%);
}


/* Private Feier */

.event-green .sobaro-event-icon {
    background:
        linear-gradient(135deg,
            rgba(73, 184, 72, 0.16),
            rgba(73, 184, 72, 0.04));
}

.event-green .sobaro-event-line {
    background: #49b848;
}

.event-green:hover {
    border-color: rgba(73, 184, 72, 0.32);

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f6fff6 100%);
}


/* ==========================================================
   Responsive – Tablet
========================================================== */

@media (max-width: 991.98px) {

    .sobaro-event-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .sobaro-event-card {
        min-height: 245px;
    }

}


/* ==========================================================
   Responsive – Smartphone
========================================================== */

@media (max-width: 575.98px) {

    .sobaro-event-grid {
        grid-template-columns: 1fr;
        gap: 15px;

        padding: 0;
    }

    .sobaro-event-card {
        min-height: auto;

        padding: 24px 20px 22px;

        border-radius: 17px;
    }

    .sobaro-event-icon {
        width: 82px;
        height: 82px;

        margin-bottom: 18px;
    }

    .sobaro-event-icon img {
        width: 56px;
        height: 56px;
    }

    .sobaro-event-title {
        min-height: auto;

        font-size: 19px;
    }

    .sobaro-event-text {
        margin-bottom: 20px;

        font-size: 15px;
    }

}


/* ==========================================================
   Reduzierte Animation für Nutzerpräferenzen
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sobaro-event-card,
    .sobaro-event-icon,
    .sobaro-event-icon img,
    .sobaro-event-line {
        transition: none;
    }

    .sobaro-event-card:hover,
    .sobaro-event-card:hover .sobaro-event-icon,
    .sobaro-event-card:hover .sobaro-event-icon img {
        transform: none;
    }

}

/* ==========================================================
   SOBARO – Leistungsbereich Zaubern / Ballonmodellieren
   Joomla 6 / Astroid
========================================================== */

.sobaro-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
}


/* Karte */

.sobaro-service-card {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(210px, 0.95fr);
    align-items: stretch;

    min-height: 410px;

    border: 1px solid rgba(10, 47, 111, 0.06);
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 12px 32px rgba(10, 47, 111, 0.08);

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


.sobaro-service-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 42px rgba(10, 47, 111, 0.14);
}


/* Hintergründe */

.sobaro-service-magic {
    background:
        linear-gradient(110deg,
            #eff8ff 0%,
            #f8fcff 58%,
            #e4f2ff 100%);
}


.sobaro-service-balloon {
    background:
        linear-gradient(110deg,
            #fff9e9 0%,
            #fffdf5 58%,
            #fff0c5 100%);
}


/* Inhalt */

.sobaro-service-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    padding: 38px 18px 32px 34px;
}


/* Überschrift mit kleinem Icon */

.sobaro-service-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;
}


.sobaro-service-heading h2 {
    margin: 0;

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: clamp(29px, 2.5vw, 40px);
    font-weight: 700;
    line-height: 1.1;
}


.sobaro-service-magic .sobaro-service-heading h2 {
    color: #0867bd;
}


.sobaro-service-balloon .sobaro-service-heading h2 {
    color: #f1ad00;
}


.sobaro-service-heading-icon {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}


/* Einleitung */

.sobaro-service-intro {
    max-width: 390px;

    margin: 0 0 24px;

    font-family:
        "Nunito",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;

    color: #314b69;
}


/* Liste */

.sobaro-service-list {
    display: grid;
    gap: 13px;

    margin: 0 0 30px;
    padding: 0;

    list-style: none;
}


.sobaro-service-list li {
    position: relative;

    padding-left: 31px;

    font-family:
        "Nunito",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    color: #203f63;
}


/* Häkchen-Kreis */

.sobaro-service-list li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0.05em;

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

    width: 21px;
    height: 21px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}


.sobaro-service-magic .sobaro-service-list li::before {
    background: #0867bd;
}


.sobaro-service-balloon .sobaro-service-list li::before {
    background: #f4b900;
}


/* Button */

.sobaro-service-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: max-content;
    min-width: 164px;

    margin-top: auto;
    padding: 13px 14px 13px 19px;

    border-radius: 10px;

    color: #ffffff;
    text-decoration: none;

    font-family:
        "Nunito",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}


.sobaro-service-magic .sobaro-service-button {
    background: #0867bd;
}


.sobaro-service-balloon .sobaro-service-button {
    background: #f6b900;
}


.sobaro-service-button:hover,
.sobaro-service-button:focus {
    color: #ffffff;
    text-decoration: none;

    transform: translateY(-3px);

    filter: brightness(0.95);

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.18);
}


.sobaro-service-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: #ffffff;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    transition: transform 0.22s ease;
}


.sobaro-service-magic .sobaro-service-button-icon {
    color: #0867bd;
}


.sobaro-service-balloon .sobaro-service-button-icon {
    color: #f6b900;
}


.sobaro-service-button:hover .sobaro-service-button-icon {
    transform: translateX(3px);
}


/* Hauptbild */

.sobaro-service-image-wrap {
    position: relative;

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

    min-width: 0;

    overflow: hidden;
}


.sobaro-service-image {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 410px;

    object-fit: contain;
    object-position: center bottom;

    transition: transform 0.35s ease;
}


.sobaro-service-card:hover .sobaro-service-image {
    transform: scale(1.025);
}


/* Leichter Übergang zwischen Inhalt und Bild */

.sobaro-service-image-wrap::before {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;

    width: 54px;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0));

    pointer-events: none;
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width: 1050px) {

    .sobaro-service-grid {
        grid-template-columns: 1fr;
    }

    .sobaro-service-card {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
        min-height: 390px;
    }

    .sobaro-service-image {
        min-height: 390px;
    }

}


/* ==========================================================
   Smartphone
========================================================== */

@media (max-width: 680px) {

    .sobaro-service-grid {
        gap: 18px;
    }

    .sobaro-service-card {
        display: flex;
        flex-direction: column;

        min-height: 0;

        border-radius: 18px;
    }

    .sobaro-service-content {
        padding: 28px 22px 20px;
    }

    .sobaro-service-heading {
        margin-bottom: 17px;
    }

    .sobaro-service-heading h2 {
        font-size: 30px;
    }

    .sobaro-service-heading-icon {
        width: 44px;
        height: 44px;
    }

    .sobaro-service-intro,
    .sobaro-service-list li {
        font-size: 15px;
    }

    .sobaro-service-image-wrap {
        min-height: 260px;
    }

    .sobaro-service-image {
        width: 100%;
        height: 280px;
        min-height: 0;

        object-position: center bottom;
    }

    .sobaro-service-image-wrap::before {
        display: none;
    }

}


/* ==========================================================
   Sehr kleine Smartphones
========================================================== */

@media (max-width: 420px) {

    .sobaro-service-heading {
        align-items: flex-start;
    }

    .sobaro-service-heading h2 {
        font-size: 27px;
    }

    .sobaro-service-heading-icon {
        width: 38px;
        height: 38px;
    }

    .sobaro-service-button {
        width: 100%;
    }

}


/* ==========================================================
   Reduzierte Bewegungen
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sobaro-service-card,
    .sobaro-service-image,
    .sobaro-service-button,
    .sobaro-service-button-icon {
        transition: none;
    }

    .sobaro-service-card:hover,
    .sobaro-service-card:hover .sobaro-service-image,
    .sobaro-service-button:hover,
    .sobaro-service-button:hover .sobaro-service-button-icon {
        transform: none;
    }

}
/* ==============================
   SOBARO Vorteile
============================== */

.sobaro-benefits {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 0;

    background: #fff;

    border-radius: 22px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, .06);

    overflow: hidden;

}


.sobaro-benefits .benefit {

    flex: 1;
    min-width: 170px;

    padding: 40px 20px;

    text-align: center;

    position: relative;

}


.sobaro-benefits .benefit:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;
    top: 25%;

    width: 1px;
    height: 50%;

    background: #dbe7f6;

}


.sobaro-benefits img {

    width: 58px;
    height: 58px;

    object-fit: contain;

    margin-bottom: 18px;

    transition: .25s;

}


.sobaro-benefits .benefit:hover img {

    transform: translateY(-6px) scale(1.08);

}


.sobaro-benefits h3 {

    margin: 0;

    font-family: "Fredoka", sans-serif;

    font-size: 18px;

    font-weight: 600;

    color: #123c78;

    line-height: 1.45;

}


.sobaro-benefits .benefit:hover h3 {

    color: #e53935;

}



/* Tablet */

@media(max-width:992px) {

    .sobaro-benefits {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

    }

    .sobaro-benefits .benefit::after {

        display: none;

    }

    .sobaro-benefits .benefit {

        border-bottom: 1px solid #e7eef7;

        border-right: 1px solid #e7eef7;

    }

}


/* Smartphone */

@media(max-width:640px) {

    .sobaro-benefits {

        grid-template-columns: repeat(2, 1fr);

    }

    .sobaro-benefits .benefit {

        padding: 28px 15px;

    }

    .sobaro-benefits img {

        width: 48px;
        height: 48px;

    }

    .sobaro-benefits h3 {

        font-size: 16px;

    }

}

/* ==========================================================
   SOBARO – Anfrageablauf
   Joomla 6 / Astroid Framework
========================================================== */

.sobaro-request-process {
    --sobaro-blue: #0a2f6f;
    --sobaro-red: #e6292f;
    --sobaro-light-blue: #1671c9;
    --sobaro-yellow: #f5b400;
    --sobaro-green: #35a844;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
    padding: 44px 34px 36px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f8faff 100%);

    border: 1px solid #edf1f6;
    border-radius: 26px;

    box-shadow:
        0 15px 42px rgba(10, 47, 111, 0.09);

    overflow: hidden;
}


/* Überschrift */

.sobaro-request-heading {
    margin-bottom: 38px;
    text-align: center;
}

.sobaro-request-heading h2 {
    margin: 0 0 6px;

    color: var(--sobaro-blue);

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: clamp(34px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.1;
}

.sobaro-request-heading p {
    margin: 0;

    color: #1e416f;

    font-family:
        "Nunito",
        Arial,
        sans-serif;

    font-size: clamp(18px, 2vw, 25px);
    font-weight: 700;
}


/* Schritte */

.sobaro-request-steps {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


/* Gestrichelte Linie */

.sobaro-request-steps::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 88px;
    left: 12%;
    right: 12%;

    border-top: 3px dotted rgba(10, 47, 111, 0.55);
}


.sobaro-request-step {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;

    text-align: center;
}


/* Nummer */

.sobaro-step-number {
    position: absolute;
    z-index: 5;

    top: -10px;
    left: calc(50% - 71px);

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

    width: 47px;
    height: 47px;

    border: 5px solid #ffffff;
    border-radius: 50%;

    color: #ffffff;

    font-family:
        "Fredoka",
        Arial,
        sans-serif;

    font-size: 24px;
    font-weight: 700;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.13);
}


/* Iconkreis */

.sobaro-step-icon {
    position: relative;

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

    width: 150px;
    height: 150px;

    margin-bottom: 25px;

    border: 2px solid currentColor;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 12px 24px rgba(10, 47, 111, 0.07);

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

.sobaro-step-icon::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 20px -17px -17px 20px;

    border-radius: 40% 60% 60% 40% / 50% 45% 55% 50%;

    background: currentColor;
    opacity: 0.09;
}

.sobaro-step-icon svg {
    width: 73px;
    height: 73px;

    fill: currentColor;
}

.sobaro-request-step:hover .sobaro-step-icon {
    transform: translateY(-5px) scale(1.025);

    box-shadow:
        0 17px 30px rgba(10, 47, 111, 0.13);
}


/* Drei Icons im ersten Schritt */

.sobaro-contact-icons {
    gap: 7px;
}

.sobaro-contact-icons svg {
    width: 43px;
    height: 43px;
}


/* Farben */

.sobaro-step-red {
    color: var(--sobaro-red);
}

.sobaro-step-blue {
    color: var(--sobaro-light-blue);
}

.sobaro-step-yellow {
    color: var(--sobaro-yellow);
}

.sobaro-step-green {
    color: var(--sobaro-green);
}

.sobaro-step-red .sobaro-step-number {
    background: var(--sobaro-red);
}

.sobaro-step-blue .sobaro-step-number {
    background: var(--sobaro-light-blue);
}

.sobaro-step-yellow .sobaro-step-number {
    background: var(--sobaro-yellow);
}

.sobaro-step-green .sobaro-step-number {
    background: var(--sobaro-green);
}


/* Texte */

.sobaro-request-step h3 {
    min-height: 52px;

    margin: 0 0 10px;

    color: var(--sobaro-blue);

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.sobaro-request-step p {
    margin: 0;

    color: #2f4057;

    font-family:
        "Nunito",
        Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}


/* Abschluss */

.sobaro-request-finish {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 42px 0 28px;

    text-align: center;
}

.sobaro-request-finish strong {
    margin-bottom: 3px;

    color: var(--sobaro-blue);

    font-family:
        "Fredoka",
        Arial,
        sans-serif;

    font-size: 27px;
    font-weight: 700;
}

.sobaro-request-finish span {
    color: var(--sobaro-red);

    font-family:
        "Fredoka",
        Arial,
        sans-serif;

    font-size: clamp(24px, 3vw, 35px);
    font-weight: 700;
    line-height: 1.2;
}


/* Kontaktbuttons */

.sobaro-contact-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.sobaro-contact-button {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
    padding: 19px 22px;

    border-radius: 17px;

    color: #ffffff;
    text-decoration: none;

    box-shadow:
        0 10px 23px rgba(0, 0, 0, 0.14);

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

.sobaro-contact-button,
.sobaro-contact-button:hover,
.sobaro-contact-button:focus,
.sobaro-contact-button:visited {
    color: #ffffff;
    text-decoration: none;
}

.sobaro-contact-button:hover {
    transform: translateY(-5px);

    filter: brightness(0.97);

    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.21);
}

.sobaro-contact-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 62px;
    height: 62px;

    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
}

.sobaro-contact-button-icon svg {
    width: 36px;
    height: 36px;

    fill: #ffffff;
}

.sobaro-contact-button>span:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.sobaro-contact-button strong {
    font-family:
        "Fredoka",
        Arial,
        sans-serif;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.sobaro-contact-button small {
    margin-top: 5px;

    color: rgba(255, 255, 255, 0.91);

    font-family:
        "Nunito",
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.3;
}


/* Buttonfarben */

.sobaro-contact-whatsapp {
    background:
        linear-gradient(135deg,
            #25d366,
            #189b45);
}

.sobaro-contact-mail {
    background:
        linear-gradient(135deg,
            #2582d8,
            #0758a6);
}

.sobaro-contact-phone {
    background:
        linear-gradient(135deg,
            #ef3539,
            #c91620);
}


/* Fokus für Tastaturbedienung */

.sobaro-contact-button:focus-visible {
    outline: 4px solid rgba(10, 47, 111, 0.25);
    outline-offset: 4px;
}


/* Tablet */

@media (max-width: 991.98px) {

    .sobaro-request-process {
        padding: 38px 24px 30px;
    }

    .sobaro-request-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 45px;
    }

    .sobaro-request-steps::before {
        display: none;
    }

    .sobaro-contact-buttons {
        grid-template-columns: 1fr;
    }

}


/* Smartphone */

@media (max-width: 575.98px) {

    .sobaro-request-process {
        padding: 32px 17px 22px;

        border-radius: 20px;
    }

    .sobaro-request-heading {
        margin-bottom: 32px;
    }

    .sobaro-request-steps {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .sobaro-step-icon {
        width: 135px;
        height: 135px;
    }

    .sobaro-step-number {
        left: calc(50% - 66px);
    }

    .sobaro-request-step h3 {
        min-height: 0;

        font-size: 21px;
    }

    .sobaro-request-step p {
        font-size: 15px;
    }

    .sobaro-request-finish {
        margin-top: 34px;
    }

    .sobaro-contact-button {
        gap: 14px;

        padding: 16px;
    }

    .sobaro-contact-button-icon {
        width: 54px;
        height: 54px;
    }

    .sobaro-contact-button-icon svg {
        width: 31px;
        height: 31px;
    }

    .sobaro-contact-button strong {
        font-size: 19px;
    }

}


/* Reduzierte Animation */

@media (prefers-reduced-motion: reduce) {

    .sobaro-step-icon,
    .sobaro-contact-button {
        transition: none;
    }

    .sobaro-request-step:hover .sobaro-step-icon,
    .sobaro-contact-button:hover {
        transform: none;
    }

}

/* ==========================================================
   SOBARO – Impressum und rechtliche Seiten
========================================================== */

.sobaro-legal-page {
    --sobaro-navy: #0a2f6f;
    --sobaro-blue: #1671c9;
    --sobaro-red: #e6292f;
    --sobaro-text: #354a63;
    --sobaro-light: #f6f9fd;
    --sobaro-border: #e4ebf3;

    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px 0 50px;

    color: var(--sobaro-text);

    font-family:
        "Nunito",
        Arial,
        Helvetica,
        sans-serif;
}


/* Kopfbereich */

.sobaro-legal-header {
    margin-bottom: 34px;
    padding: 42px 38px;

    background:
        linear-gradient(
            135deg,
            #eff7ff 0%,
            #ffffff 55%,
            #fff5f5 100%
        );

    border: 1px solid var(--sobaro-border);
    border-radius: 24px;

    box-shadow:
        0 12px 32px rgba(10, 47, 111, 0.07);
}


.sobaro-legal-kicker {
    display: block;
    margin-bottom: 8px;

    color: var(--sobaro-red);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.sobaro-legal-header h1 {
    margin: 0 0 10px;

    color: var(--sobaro-navy);

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: clamp(38px, 5vw, 58px);
    font-weight: 700;
    line-height: 1.05;
}


.sobaro-legal-header p {
    margin: 0;

    color: #526984;

    font-size: 17px;
    line-height: 1.5;
}


/* Inhalt */

.sobaro-legal-content {
    display: grid;
    gap: 20px;
}


/* Einzelne Karte */

.sobaro-legal-card {
    padding: 30px 34px;

    background: #ffffff;

    border: 1px solid var(--sobaro-border);
    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(10, 47, 111, 0.05);
}


.sobaro-legal-card h2 {
    position: relative;

    margin: 0 0 20px;
    padding-bottom: 12px;

    color: var(--sobaro-navy);

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
}


.sobaro-legal-card h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 42px;
    height: 4px;

    background: var(--sobaro-red);
    border-radius: 10px;
}


.sobaro-legal-card p {
    margin: 0 0 16px;

    font-size: 16px;
    line-height: 1.7;
}


.sobaro-legal-card p:last-child {
    margin-bottom: 0;
}


.sobaro-legal-card address {
    margin: 0;

    color: var(--sobaro-text);

    font-size: 16px;
    font-style: normal;
    line-height: 1.7;
}


.sobaro-legal-card strong {
    color: var(--sobaro-navy);
    font-weight: 800;
}


/* Links */

.sobaro-legal-card a {
    color: var(--sobaro-blue);
    font-weight: 700;
    text-decoration: none;
}


.sobaro-legal-card a:hover,
.sobaro-legal-card a:focus {
    color: var(--sobaro-red);
    text-decoration: underline;
}


/* Kontaktabstände */

.sobaro-contact-entry + .sobaro-contact-entry {
    margin-top: 18px;
}


/* Smartphone */

@media (max-width: 575.98px) {

    .sobaro-legal-page {
        padding-top: 5px;
    }

    .sobaro-legal-header {
        padding: 30px 22px;
        border-radius: 19px;
    }

    .sobaro-legal-card {
        padding: 25px 22px;
        border-radius: 16px;
    }

    .sobaro-legal-card h2 {
        font-size: 22px;
    }

    .sobaro-legal-card p,
    .sobaro-legal-card address {
        font-size: 15px;
    }

}

/* ==========================================================
   Ergänzungen für die SOBARO-Datenschutzerklärung
========================================================== */

.sobaro-legal-card h3 {
    margin: 26px 0 10px;

    color: var(--sobaro-navy);

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.sobaro-legal-card h3:first-of-type {
    margin-top: 0;
}

.sobaro-legal-card ul {
    margin: 18px 0;
    padding-left: 24px;
}

.sobaro-legal-card li {
    margin-bottom: 8px;

    font-size: 16px;
    line-height: 1.6;
}

.sobaro-legal-placeholder {
    padding: 18px 20px;

    background: #fff8e8;

    border: 2px dashed #e3a500;
    border-radius: 12px;
}

@media (max-width: 575.98px) {

    .sobaro-legal-card h3 {
        font-size: 18px;
    }

    .sobaro-legal-card li {
        font-size: 15px;
    }

}
/* ==========================================================
   SOBARO – Grundstruktur der Joomla-Blogübersicht
========================================================== */

.blog {
    --sobaro-navy: #0a2f6f;
    --sobaro-blue: #1671c9;
    --sobaro-red: #e6292f;
    --sobaro-text: #354a63;
    --sobaro-border: #e4ebf3;
    --sobaro-background: #f6f9fd;

    width: 100%;
    max-width: 1050px;

    margin: 0 auto;
    padding: 20px 0 50px;

    color: var(--sobaro-text);

    font-family:
        "Nunito",
        Arial,
        Helvetica,
        sans-serif;
}


/* ==========================================================
   Joomla-Grid
========================================================== */

.blog .blog-items {
    width: 100%;
}

.blog .items-row {
    width: 100%;
}

.blog .items-row > .row {
    display: grid;

    grid-template-columns: 1fr;
    gap: 30px;

    margin: 0;
}

.blog .blog-item {
    width: 100%;
    padding: 0;
}


/* ==========================================================
   Einzelne Beitragskarte
========================================================== */

.blog .item-content {
    display: grid;

    grid-template-columns: minmax(280px, 38%) 1fr;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--sobaro-border);
    border-radius: 22px;

    box-shadow:
        0 12px 32px rgba(10, 47, 111, 0.07);

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

.blog .item-content:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 38px rgba(10, 47, 111, 0.12);
}


/* ==========================================================
   Beitragsbild
========================================================== */

.blog .item-image,
.blog .left.item-image {
    width: 100%;
    height: 100%;

    margin: 0;
}

.blog .item-image a {
    display: block;

    width: 100%;
    height: 100%;
}

.blog .item-image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 320px;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   Rechter Inhaltsbereich
========================================================== */

.blog .item-content > .d-flex {
    display: flex !important;
    flex-direction: column;

    min-width: 0;

    padding: 34px 38px 36px;
}


/* ==========================================================
   Beitragstitel
========================================================== */

.blog .article-title {
    margin: 0 0 20px;
}

.blog .article-title .page-header {
    margin: 0;
    padding: 0;

    border: 0;
}

.blog .article-title h2 {
    position: relative;

    margin: 0;
    padding-bottom: 15px;

    font-family:
        "Fredoka",
        "Arial Rounded MT Bold",
        Arial,
        sans-serif;

    font-size: clamp(27px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

.blog .article-title h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 48px;
    height: 4px;

    background: var(--sobaro-red);
    border-radius: 10px;
}

.blog .article-title h2 a {
    color: var(--sobaro-navy);
    text-decoration: none;

    transition: color 0.2s ease;
}

.blog .article-title h2 a:hover,
.blog .article-title h2 a:focus {
    color: var(--sobaro-red);
    text-decoration: none;
}


/* ==========================================================
   Vorschautext
========================================================== */

.blog .article-intro-text {
    display: -webkit-box;

    overflow: hidden;

    color: var(--sobaro-text);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.blog .article-intro-text p {
    margin: 0;

    font-size: 16px;
    line-height: 1.7;
}

.blog .article-intro-text strong {
    color: var(--sobaro-navy);
    font-weight: 800;
}


/* Inhalte aus dem vollständigen Beitrag in der Übersicht
   nicht anzeigen */

.blog .article-intro-text h2,
.blog .article-intro-text h3,
.blog .article-intro-text ul,
.blog .article-intro-text ol {
    display: none;
}


/* ==========================================================
   Weiterlesen-Button
========================================================== */

.blog .readmore,
.blog .readmore-wrapper {
    margin-top: auto;
    padding-top: 24px;
}

.blog .readmore a,
.blog a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-height: 46px;

    padding: 11px 22px;

    color: #ffffff;

    font-family:
        "Nunito",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            var(--sobaro-blue),
            var(--sobaro-navy)
        );

    border: 0;
    border-radius: 12px;

    box-shadow:
        0 8px 18px rgba(10, 47, 111, 0.16);

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

.blog .readmore a:hover,
.blog .readmore a:focus,
.blog a.btn:hover,
.blog a.btn:focus {
    color: #ffffff;
    text-decoration: none;

    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(10, 47, 111, 0.24);
}


/* ==========================================================
   Mehrere Beiträge
========================================================== */

.blog .blog-item + .blog-item {
    margin-top: 0;
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width: 991.98px) {

    .blog {
        padding-left: 15px;
        padding-right: 15px;
    }

    .blog .item-content {
        grid-template-columns: minmax(240px, 40%) 1fr;
    }

    .blog .item-content > .d-flex {
        padding: 28px 30px 30px;
    }

    .blog .item-image img {
        min-height: 290px;
    }

}


/* ==========================================================
   Smartphone
========================================================== */

@media (max-width: 767.98px) {

    .blog {
        padding-top: 5px;
    }

    .blog .item-content {
        display: block;

        border-radius: 18px;
    }

    .blog .item-image,
    .blog .left.item-image {
        height: auto;
    }

    .blog .item-image a {
        height: auto;
    }

    .blog .item-image img {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 320px;

        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .blog .item-content > .d-flex {
        padding: 24px 22px 27px;
    }

    .blog .article-title h2 {
        font-size: 25px;
    }

    .blog .article-intro-text {
        -webkit-line-clamp: 4;
    }

    .blog .article-intro-text p {
        font-size: 15px;
    }

}