/* ============================================================
   Next Infotreffen Block – Style 1 & Style 2
   ============================================================ */

/* ── Gemeinsame Basiselemente ───────────────────────────────── */

.infotreffen-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.infotreffen-block__heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.infotreffen-block__description {
    font-size: 1rem;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.infotreffen-block__no-event {
    font-size: 1rem;
    color: #1a1a1a;
    margin: 0;
    font-style: italic;
}

.infotreffen-block__button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #1a1a1a;
    color: #fff;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.infotreffen-block__button:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

/* ── Style 1: gelbe Karte ───────────────────────────────────── */


.has-primary-hover{
    position: relative;
    overflow: hidden;
    padding: 20px 40px;
    line-height: 1em;
}

.has-primary-hover span{
    display: inline-block;
    transition: transform .25s ease;
}

.has-primary-hover::after{
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 24px;
    height: 24px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21.0459 12.7959L14.2959 19.5459C14.0846 19.7573 13.7979 19.876 13.4991 19.876C13.2002 19.876 12.9135 19.7573 12.7022 19.5459C12.4908 19.3346 12.3721 19.048 12.3721 18.7491C12.3721 18.4502 12.4908 18.1635 12.7022 17.9522L17.5312 13.125H3.75C3.45163 13.125 3.16548 13.0065 2.9545 12.7955C2.74353 12.5845 2.625 12.2984 2.625 12C2.625 11.7016 2.74353 11.4155 2.9545 11.2045C3.16548 10.9935 3.45163 10.875 3.75 10.875H17.5312L12.7041 6.04501C12.4927 5.83367 12.374 5.54702 12.374 5.24814C12.374 4.94925 12.4927 4.66261 12.7041 4.45126C12.9154 4.23992 13.2021 4.12119 13.5009 4.12119C13.7998 4.12119 14.0865 4.23992 14.2978 4.45126L21.0478 11.2013C21.1527 11.3059 21.2359 11.4303 21.2926 11.5672C21.3493 11.7041 21.3784 11.8508 21.3782 11.999C21.3781 12.1472 21.3486 12.2939 21.2916 12.4306C21.2346 12.5674 21.1511 12.6915 21.0459 12.7959Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;

    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
    transition: all .25s ease;
}

.has-primary-hover:hover span{
    transform: translateX(-12px);
}

.has-primary-hover:hover::after{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.infotreffen-block--style-1 {
    position: relative;
    background: #F5A623;
    border-radius: 48px;
    padding: 3rem 2rem;
    overflow: hidden;
	height: 100%;
	padding-bottom: 2rem;
	
}

p.infotreffen-block__description {
    font-size:20px;
}

/* "i"-Icon oben rechts, leicht überlappend */
.infotreffen-block--style-1 .infotreffen-block__icon{
    position: absolute;
    top: 0px;
    right: 5px;
    width: 120px;
    height: 120px;
    line-height: 1;
    pointer-events: none;
    background: url(/wp-content/uploads/2026/05/home-info-treffen-rcb.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.infotreffen-block--style-1 .infotreffen-block__heading {
    padding-right: 3rem; /* Platz für Icon */
}

/* Footer: Datum links, Button rechts */
.infotreffen-block--style-1 .infotreffen-block__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.infotreffen-block--style-1 .infotreffen-block__date-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.infotreffen-block--style-1 .infotreffen-block__date-label {
    font-size: 0.85rem;
    color: #1a1a1a;
}

.infotreffen-block--style-1 .infotreffen-block__date {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

@media (max-width: 480px) {
    .infotreffen-block--style-1 .infotreffen-block__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .infotreffen-block--style-1 .infotreffen-block__button {
        width: 100%;
        text-align: center;
    }
}

/* ── Style 2: weisse Karte mit SVG-Grafik rechts ────────────── */

.infotreffen-block--style-2 {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    padding: 2.5rem 0 2.5rem 2.5rem;
}

.infotreffen-block--style-2 .infotreffen-block__content {
    flex: 1 1 0;
    min-width: 0;
}

.infotreffen-block--style-2 .infotreffen-block__graphic {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Grafik darf leicht nach rechts überlaufen */
    margin-right: -2rem;
}

.infotreffen-block--style-2 .infotreffen-block__graphic img {
    display: block;
    width: clamp(160px, 28vw, 264px);
    height: auto;
}

/* Datum-Zeile: "Nächstes Treffen:" schwarz, Datum rot */
.infotreffen-block--style-2 .infotreffen-block__date-line {
    font-size: 1rem;
    margin: 0 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    align-items: baseline;
}

.infotreffen-block--style-2 .infotreffen-block__date--highlight {
    color: #E84242;
    font-weight: 600;
}

/* Aktionsleiste: primärer Button + optionaler Textlink */
.infotreffen-block--style-2 .infotreffen-block__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.infotreffen-block--style-2 .infotreffen-block__secondary-link {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
}

.infotreffen-block--style-2 .infotreffen-block__secondary-link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
	

	
    .infotreffen-block--style-2 {
        flex-direction: column;
        padding: 2rem;
        align-items: flex-start;
    }
    .infotreffen-block--style-2 .infotreffen-block__graphic {
        display: none;
    }
    .infotreffen-block--style-2 .infotreffen-block__button {
        width: 100%;
        text-align: center;
    }
}