.wp-block-gallery {
    margin-top: 25px !important;
}

hr {
	color: var(--green2);
}

/* -------------------------------------------------------------
   H1: Das große Banner-Polygon (früher h2)
   ------------------------------------------------------------- */
h1, h1:hover {
    color: var(--permaweiss) !important;
    cursor: default;
    pointer-events: none;        
    text-decoration: none;

    /* Auf Textbreite beschränken & zentrieren */
    width: fit-content !important;
    display: block !important;
    margin-inline: auto !important;
    text-align: center;

    position: relative;
    z-index: 1;

    /* 1. Äußere Box = ORANGE */
    background: var(--orange2) !important;
    border: none !important;
    filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    /* Äußere Form */
    --spitze: 0.7em;
    clip-path: polygon(
        var(--spitze) 0%,
        calc(100% - var(--spitze)) 0%,
        100% 50%,
        calc(100% - var(--spitze)) 100%,
        var(--spitze) 100%,
        0% 50%
    ) !important;

    /* Rahmendicke festlegen */
    --rand: 2.5px;

    /* Innenabstand für Text */
    padding: calc(0.35em + var(--rand)) calc(2.2em + var(--rand)) !important;
    font-size: 1.8rem !important;
    line-height: 2.2rem !important;
    box-sizing: border-box !important;
    margin-top: -1rem !important;
    margin-bottom: 2rem !important;

    word-break: break-word;
    hyphens: auto;
}

/* 2. Innere Fläche = GRÜN */
h1::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    /* Box ist EXAKT genauso groß wie die äußere (kein Winkelverzug!) */
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--green2) !important;
    z-index: -1 !important;

    /* 
       PERFEKTE PARALLELE:
       Die Punkte werden im Polygon selbst um exakt die Rahmendicke 
       nach innen versetzt. Dadurch stimmen Winkel und Kantenbreite überall überein!
    */
    --w: calc(var(--spitze) + var(--rand) * 0.414);
    clip-path: polygon(
        var(--w) var(--rand),
        calc(100% - var(--w)) var(--rand),
        calc(100% - var(--rand) * 1.414) 50%,
        calc(100% - var(--w)) calc(100% - var(--rand)),
        var(--w) calc(100% - var(--rand)),
        calc(var(--rand) * 1.414) 50%
    ) !important;
}

/* Altes ::after deaktivieren */
h1::after {
    content: none !important;
    display: none !important;
}


/* -------------------------------------------------------------
   H2: Sechseck-Design (für alle h2)
   ------------------------------------------------------------- */
h2 {
    background: var(--green2) !important;
    color: var(--permaweiss) !important;
    border: none !important;

    /* Zentriert auf Textbreite mit Flexbox für die Sechsecke */
    display: flex !important;
    width: fit-content !important;
    margin-inline: auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.9rem !important;

    /* Abstände */
    padding: 0.45rem 1.4rem !important;
    margin-top: 2.2rem !important;
    border-radius: 4px;
}

/* Verhindert, dass <strong> oder <a> in WordPress die Farbe/Struktur stören */
h2,
h2 * {
    color: var(--permaweiss) !important;
    text-decoration: none !important;
}

/* Pseudo-Elemente Sechsecke einfügen */
h2::before,
h2::after {
    display: inline-block !important;
    content: "" !important;
    position: static !important;
    inset: auto !important;
    clip-path: none !important;
    z-index: auto !important;

    /* Flaches Sechseck (Flache Seite oben und unten) */
    width: 1.35em !important;
    height: 1.15em !important;
    flex-shrink: 0 !important;

    /* Flaches gleichseitiges Sechseck als inline-SVG */
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* Füllung: Orange (#ff9900), Rahmen: Schwarz (#000000) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,2 75,2 98,43.3 75,84.6 25,84.6 2,43.3' fill='%23ff9900' stroke='%23000000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


h3 {
    color: var(--hx);
}

p, span {
    color: var(--text);
	line-height: 1.9;
    text-align: justify;
    word-break: normal;
    hyphens: auto;
}


.entry ul {
	color: var(--text);
}

y5 {
	  font-size: xx-large;
}
.wp-block-list {
	margin-left: 2cqi;
}


.ausstattung {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.ausstattung-grid {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Kacheln für Ausstattung */
/* Kachel */

.ausstattung-box {
    background: var(--hintergrund);
    border: 2px solid var(--green2);
    color: var(--schwarz);

    padding: 20px;
    box-sizing: border-box;
}


/* Überschrift */

.ausstattung-box h3 {
    margin: 0 0 16px;

    color: var(--green2);
    text-align:center;

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

    text-transform: uppercase;
}


/* Bildbereich */

.ausstattung-bild {
    width: 100%;
    aspect-ratio: 16 / 9;

    margin-bottom: 18px;

    background: var(--schwarz);

    border: 1px solid var(--green2);

    overflow: hidden;
}


/* tatsächliches Bild */

.ausstattung-bild img {
    width: 100%;
    height: 100%;

    display: block;
    border-radius: 0px;
    object-fit: cover;
}


/* Aufzählung */

.ausstattung-box ul {
    margin: 0;
    padding: 0;

    list-style: none;
}
.ausstattung-box li {
    position: relative;
    padding-left: 24px;

    color: var(--text);
    font-size: 16px;
    line-height: 1.45;
}

.ausstattung-box li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.72em;

    width: 13px;
    height: 11px;

    transform: translateY(-50%);

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,2 75,2 98,43.3 75,84.6 25,84.6 2,43.3' fill='%23ff9900' stroke='%23000000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ausstattung-box li > ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,2 75,2 98,43.3 75,84.6 25,84.6 2,43.3' fill='%23139900' stroke='%23000000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


/* Mobil */
@media (max-width: 600px) {

    .ausstattung {
        padding: 12px 0;
    }

    .ausstattung-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ausstattung-box {
        padding: 16px;
    }

    .ausstattung-box h3 {
        font-size: 19px;
    }

}

/* ==========================================================================
   RESPONSIVE ÜBERSCHRIFTEN
   ========================================================================== */

/* Tablet & Desktop: Max-Width für bessere Lesbarkeit */
@media (min-width: 501px) {
    h1, h1:hover, h2 {
        max-width: 80% !important;
    }
}

@media (min-width: 501px) and (max-width: 900px) {
    h1, h1:hover {
        padding: calc(0.35em + var(--rand)) calc(2.2em + var(--rand)) !important;
        font-size: 1.3rem !important;
        line-height: 1.9rem !important;
    }
}

@media (max-width: 500px) {
    h1, h1:hover {
        padding: calc(0.35em + var(--rand)) calc(2.2em + var(--rand)) !important;
        font-size: 1.2rem !important;
        line-height: 1.6rem !important;
    }

    h2 {
        padding: 0.45rem 0.75rem !important;
    }

    h2::before,
    h2::after {
        /* Flaches Sechseck (Flache Seite oben und unten) */
        width: 0.85em !important;
        height: 0.75em !important;
    }
}

@media (min-width: 1920px) {
    h1, h1:hover {
        font-size: calc((20 * 100vw) / 1920) !important;
    }
}