@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDTbtPY_Q.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ===============================
   GRID
================================= */
.search-results-grid {
    column-count: 3;
    column-gap: 16px;
    width: 100%;
    margin-bottom: 20px;
}

/* ===============================
   CARD / ITEM
================================= */
.masonry-item {
    display: block;
    width: 100%;
    margin: 0 0 16px;

    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    background: #ffffff;

    overflow: visible; /* 🔥 WICHTIG (war vorher hidden) */

    position: relative; /* 🔥 für z-index Kontext */
    z-index: 1;
}

/* Innenbereich */
.masonry-item article {
    padding: 9px;
    text-align: center;
}

/* ===============================
   BILD
================================= */
.tnail {
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: visible; /* 🔥 WICHTIG */

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

    margin-bottom: 20px;

    position: relative;
}

.tnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===============================
   Autor (FIXED)
================================= */
.author-overlay {
    position: absolute;

    left: 110px;   /* 🔥 Abstand links */
    right: 110px;  /* 🔥 Abstand rechts */
    bottom: 0;

    transform: translateY(50%); /* 🔥 halb ins Bild */

    background: black; /* etwas stärker sichtbar */
    color: #fff;

    padding: 3px 8px;   /* 🔥 kleiner als vorher */
    font-size: 13px;     /* 🔥 kleinere Schrift */
    font-family: 'Playfair Display', serif;
   

    border-radius: 0px;

    z-index: 9999; /* 🔥 ganz vorne */

    box-sizing: border-box;
}
    
    .author-overlay {
    text-transform: none; /* 🔥 wichtig: reset */
}

.author-overlay {
    text-transform: none;
}

.author-overlay .serif-italic {
    text-transform: lowercase;
    font-size: 10px;      /* 🔥 kleiner als Name */
    opacity: 0.8;
    letter-spacing: 0.5px;
}

.author-overlay .author.vcard {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===============================
   TEXT
================================= */
.entry-title {
    margin: 12px 0 8px;
    padding: 0 20px;
    text-transform: uppercase;
    font-size: 28px;
    letter-spacing: 0.5px;
}

.categories {
    margin-bottom: 10px;
}

.categories a {
    display: inline-block;
    font-size: 12px !important;
    color: #808080 !important;
    padding: 4px 8px;
    text-decoration: none;
}

/* ===============================
   INFO BOX
================================= */
.info-toggle {
    cursor: pointer;
    font-size: 14px;
    margin-top: 12px;
    color: black;
}

.info-box {
    display: none;
    margin-top: 15px;

    background: #fafafa;
    padding: 12px;
}

.info-box.open {
    display: block;
}

/* ===============================
   RATING
================================= */
.rating {
    margin: 16px 0;
}

.rating .star {
    cursor: pointer;
}

/* ===============================
   COMMENTS
================================= */
.comment-box {
    margin-top: 16px;
}

.comment-box input,
.comment-box textarea {
    width: 100%;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #ddd;
}

.comment-box button {
    padding: 8px 12px;
    border: none;
    cursor: pointer;
}

/* ===============================
   PRESETS
================================= */
.search-presets {
    margin-bottom: 15px;
}

.preset-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 6px;
    margin-bottom: 6px;
    background: #eee;
    border-radius: 6px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
}

.preset-btn:hover {
    background: #ddd;
}

/* ===============================
   IMAGE PREVIEW
================================= */
.image-preview {
    margin-top: 10px;
}

.image-preview img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ===============================
   MOBILE
================================= */
@media (max-width: 1024px) {
    .search-results-grid {
        column-count: 2;
        column-gap: 12px;
    }

    .masonry-item {
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {

    .search-results-grid {
        column-count: 1 !important;
        column-gap: 0;
        display: block;
    }

    .masonry-item {
        width: 100%;
        margin-bottom: 16px;
    }
}

/* ===============================
   NO RESULTS
================================= */
.no-results-wrap {
    width: 100%;
    display: block;
    column-span: all;
    text-align: center;
    margin: 40px 0;
}

/* ===============================
   UTIL
================================= */
.hidden {
    display: none !important;
}

.submit-comment {
    margin-bottom: 12px;
}

.toggle-comments {
    margin-top: 10px;
}

input[type="email"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box;
}