/* --------------------------------------------------
   ABOUT SECTION
-------------------------------------------------- */

.about-section {
    width: 100%;
    padding-top: 180px;
    padding-bottom: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 20;
}


.about-title {
    font-family: "CinzelDecorative";
    font-size: 70px;
    font-weight: 900;
    color: #2b2b2b;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

/* Unterstreichung */
.about-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 6px;
    background: #2b2b2b;
    transform: skewX(-8deg);
    border-radius: 3px;
}

/* Wrapper for arrows + image */
.about-wrapper {
    position: relative;
    display: inline-block;
}

/* --------------------------------------------------
   IMAGE + CARTOON FRAME
-------------------------------------------------- */

.about-image-wrapper {
    position: relative;
    display: inline-block;
    padding: 40px;
}

.about-image {
    width: 1000px;
    max-width: 85vw;
    display: block;
}

.line1,
.line2,
.about-image-wrapper::before,
.about-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Top + bottom */
.about-image-wrapper::before {
    border-top: 6px solid #000;
    border-bottom: 6px solid #000;
    transform: rotate(0.7deg);
}

/* Left + right */
.about-image-wrapper::after {
    border-left: 6px solid #000;
    border-right: 6px solid #000;
    transform: rotate(-0.7deg);
}

/* Second set top/bottom */
.line1 {
    border-top: 6px solid #000;
    border-bottom: 6px solid #000;
    transform: rotate(-0.4deg);
}

/* Second set left/right */
.line2 {
    border-left: 6px solid #000;
    border-right: 6px solid #000;
    transform: rotate(0.4deg);
}

/* --------------------------------------------------
   HOTSPOTS
-------------------------------------------------- */

.hotspot {
    position: absolute;
    cursor: pointer;
    background: transparent;
}

/* Tür links */
.hotspot-freizeit {
    left: 4%;
    top: 25%;
    width: 18%;
    height: 55%;
}

/* Wandbild */
.hotspot-design {
    left: 28%;
    top: 12%;
    width: 20%;
    height: 25%;
}

/* PC Tower */
.hotspot-technik {
    right: 10%;
    top: 30%;
    width: 12%;
    height: 50%;
}

/* --------------------------------------------------
   POPUP (ALTES DESIGN – DEINE VERSION)
-------------------------------------------------- */

.popup-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.popup-content {
    width: 900px;
    max-width: 90vw;
    height: 560px;
    background: white;
    border: 1px solid #2b2b2b;
    display: flex;
    position: relative;
    overflow: hidden;
}

.popup-left {
    width: 50%;
    height: 100%;
}

.popup-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-right {
    width: 50%;
    padding: 45px;
    background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,1));
    font-family: "CinzelDecorative";
}

.popup-right h2 {
    font-size: 55px;
    margin-bottom: 25px;
}

.popup-right p {
    font-size: 20px;
    line-height: 1.35;
}

.popup-close {
    position: absolute;
    right: 18px;
    top: 12px;
    font-size: 45px;
    cursor: pointer;
    color: #2b2b2b;
    font-weight: 900;
}

/* --------------------------------------------------
   DECORATIVE ARROWS – LEFT + RIGHT
-------------------------------------------------- */

.decor-arrow {
    position: absolute;
    z-index: 200;
    width: 180px;
    opacity: 0.95;
    pointer-events: none;
}

/* Left – Pfeil1.png */
.arrow-left-1 {
    left: -210px;
    top: 120px;
    transform: rotate(-10deg);
}

/* Left – Pfeil2.png */
.arrow-left-2 {
    left: -200px;
    bottom: 180px;
    transform: rotate(-28deg);
}

/* Right – Pfeil2.png (gespiegelt) */
.arrow-right {
    right: -210px;
    top: 200px;
    transform: scaleX(-1) rotate(12deg);
}
/* --------------------------------------------------
   MOBILE FIX – ARROWS AUSBLENDEN
-------------------------------------------------- */
@media (max-width: 900px) {
    .decor-arrow {
        display: none !important;
    }
}

/* --------------------------------------------------
   MOBILE OPTIMIZATION – ABOUT TITLE
-------------------------------------------------- */
@media (max-width: 900px) {
    .about-title {
        font-size: 50px !important;
        margin-bottom: 30px !important;
    }
}

@media (max-width: 600px) {
    .about-title {
        font-size: 38px !important;
        margin-bottom: 26px !important;
    }
}

@media (max-width: 430px) {
    .about-title {
        font-size: 30px !important;
        margin-bottom: 22px !important;
    }
}

/* --------------------------------------------------
   MOBILE – ABOUT IMAGE SMALLER + WRAPPER FIX
-------------------------------------------------- */

/* Tablets / Mid-size */
@media (max-width: 900px) {
    .about-image-wrapper {
        width: 55vw !important;
        padding: 16px !important;
    }

    .about-image {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Smartphones normal */
@media (max-width: 600px) {
    .about-image-wrapper {
        width: 70vw !important;
        padding: 10px !important;
    }

    .about-image {
        width: 100% !important;
    }
}

/* Kleine Phones (iPhone SE etc.) */
@media (max-width: 430px) {
    .about-image-wrapper {
        width: 78vw !important;
        padding: 6px !important;
    }
}

/* Rahmen fein auf kleinen Geräten */
@media (max-width: 600px) {
    .line1,
    .line2,
    .about-image-wrapper::before,
    .about-image-wrapper::after {
        border-width: 2px !important;
    }
}

/* --------------------------------------------------
   MOBILE – POPUP RESPONSIVE FIX
-------------------------------------------------- */
@media (max-width: 900px) {
    .popup-content {
        width: 90vw !important;
        height: auto !important;
        flex-direction: column !important;
    }

    .popup-left,
    .popup-right {
        width: 100% !important;
        height: auto !important;
    }

    .popup-left img {
        height: 40vh !important;
        object-fit: cover !important;
    }

    .popup-right {
        padding: 26px !important;
    }

    .popup-right h2 {
        font-size: 36px !important;
        margin-bottom: 18px !important;
    }

    .popup-right p {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .popup-close {
        font-size: 32px !important;
        top: 8px !important;
        right: 12px !important;
    }
}