section[data-block="guestbook"] form {

	display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
		padding-bottom: 4rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    align-items: start;
}

/* ============================================
   FORM-ELEMENTE
   ============================================ */
/* Labels */
section[data-block="guestbook"] form label {
    font-weight: bold;
}
section[data-block="guestbook"] form label.error {
    color: rgb(201, 39, 39);
}

section[data-block="guestbook"] form label[for="name"],
section[data-block="guestbook"] form label[for="email"],
section[data-block="guestbook"] form label[for="message"] {
    grid-column: span 12 / span 12;
    grid-row: auto;
}

/* Input-Container */
section[data-block="guestbook"] form label + div {
    grid-column: span 12 / span 12;
    grid-row: auto;
}

section[data-block="guestbook"] form .error {
    grid-column: span 12 / span 12;
    grid-row: auto;
}
section[data-block="guestbook"] form .error span {
		color: rgb(201, 39, 39);
}

/* Input-Felder */
section[data-block="guestbook"] form label + div input,
section[data-block="guestbook"] form label + div textarea {
    border: 1px solid #aaa;
    background-color: #f7f7f7;
    padding: 0.5rem;
    width: 100%;
}
section[data-block="guestbook"] form label + div textarea {
    min-height: calc(1em * 5);
}

section[data-block="guestbook"] form .honeypot {
    position: absolute;
    left: -9999px;
}

/* Submit-Button */
section[data-block="guestbook"] form div.submit {
    grid-column: span 12 / span 12;
    grid-row: auto;
}
section[data-block="guestbook"] form div.submit input {
    width: auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: black;
    background-color: #00C0FF;
    font-weight: 600;
    font-size: 1rem; /* text-base */
    cursor: pointer;
}

section[data-block="guestbook"] form div.submit button {
    /* Die gleichen Styles wie für input */
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: black;
    background-color: #00C0FF;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;

    /* Neue Styles für Button mit SVG */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* Toggle-Button - gleich wie Submit-Button aber zentriert */
section[data-block="guestbook"] .guestbook-form-wrapper {
    display: none;
}

section[data-block="guestbook"] .guestbook-form-wrapper.is-open {
    display: block;
}

section[data-block="guestbook"] .toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: max-content;
    margin: 2rem auto;
    padding: 0.5rem 0.75rem;
    color: black;
    background-color: #00C0FF;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

section[data-block="guestbook"] .toggle span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

section[data-block="guestbook"] .toggle svg {
    width: 16px;
    height: 16px;
}

section[data-block="guestbook"] .guestbook-entry.is-hidden {
    display: none;
}

section[data-block="guestbook"] .guestbook-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem auto 0;
    padding: 0.5rem 0.75rem;
    color: black;
    background-color: #00C0FF;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

section[data-block="guestbook"] .guestbook-load-more.is-busy,
section[data-block="guestbook"] .guestbook-load-more:disabled {
    opacity: 0.6;
    cursor: wait;
}



@media (min-width: 768px) {
    section[data-block="guestbook"] form label {
        padding: 0.5rem 0;
    }

		section[data-block="guestbook"] form div.submit input {
        font-size: 1.125rem; /* md:text-lg */
    }

    section[data-block="guestbook"] .toggle {
        font-size: 1.125rem;
    }

    section[data-block="guestbook"] .guestbook-load-more {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    section[data-block="guestbook"] form div.submit input {
        padding-top: 0.75rem; /* lg:py-3 */
        padding-bottom: 0.75rem;
        font-size: 1.25rem; /* lg:text-xl */
    }

    section[data-block="guestbook"] .toggle {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1.25rem;
    }

    section[data-block="guestbook"] .guestbook-load-more {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    /* Form-Container */
    section[data-block="guestbook"] form {
        padding-bottom: 5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Labels */
    section[data-block="guestbook"] form label[for="name"],
    section[data-block="guestbook"] form label[for="email"],
    section[data-block="guestbook"] form label[for="message"] {
        grid-column: span 3;
        text-align: right;
    }

    /* Input-Container */
    section[data-block="guestbook"] form label + div {
        grid-column: span 8;
    }

    section[data-block="guestbook"] form .error {
        grid-column-start: 4;
        grid-column-end: span 8;
    }

    /* Submit-Button */
    section[data-block="guestbook"] form div.submit {
        grid-column-start: 4;
        grid-column-end: span 8;
    }
}

/* Ab Laptop (lg) */
@media (min-width: 1024px) {
    section[data-block="guestbook"] form {
        padding-bottom: 6rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Ab Desktop (xl) */
@media (min-width: 1280px) {
    section[data-block="guestbook"] form {
        padding-bottom: 7rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}