/* ═══════════════════════════════════════════════
   PO4 – Projektseite (projekt.php)
   ═══════════════════════════════════════════════ */

.project-detail { margin-bottom: 2rem; }
.detail-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 50px; }
.detail-controls img, .detail-controls a img { width: 20px; height: 20px; cursor: pointer; }
.detail-images { display: flex; gap: 30px; margin-bottom: 1rem; }
.detail-images .image-panel { flex: 1; }
.detail-images .image-panel img { width: 100%; border-radius: 5px; cursor: pointer; }
@media (hover: hover) { .detail-images .image-panel img:hover { outline: 1px solid #000; outline-offset: 10px; } }
.image-caption { font-size: 0.85rem; color: #444; padding: 0 10px; margin-top: 14px; }

.project-title { margin-top: 2rem; }
.project-subtitle { margin-bottom: 1rem; }

/* Kurztext */
.project-lead { font-size: 1.25rem; line-height: 1.45; max-width: 46em; margin-bottom: 1.5rem; }

/* Text */
.detail-text-row { margin-top: 0.5rem; margin-bottom: 1.5rem; }
.detail-text-main p { margin: 0 0 1em 0; }
.detail-text-main p:last-child { margin-bottom: 0; }
.detail-text-main h3 { display: block; font-family: 'GT-Pressura-Bold', sans-serif; font-weight: normal; font-size: 1rem; margin: 1.5em 0 0.4em 0; break-after: avoid; }
.detail-text-main h3:first-child { margin-top: 0; }
.detail-text-main ul { margin: 0 0 1em 0; padding-left: 1.2em; }
.detail-text-main a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
    .detail-text-main { columns: 2; column-gap: 40px; column-fill: balance; max-width: 1200px; }
    .detail-text-main p { break-inside: avoid; }
}

/* Aufklappbare Bereiche: «Ganzer Text» und «Details» */
.toggle > summary {
    cursor: pointer;
    list-style: none;
    font-family: 'GT-Pressura-Light', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.toggle > summary::-webkit-details-marker { display: none; }
.toggle > summary .details-arrow { display: inline-block; transition: transform 0.25s ease; }
.toggle[open] > summary .details-arrow { transform: rotate(90deg); }
.toggle > summary:hover { font-family: 'GT-Pressura-Bold', sans-serif; }
.fulltext { margin-bottom: 1.5rem; }
.fulltext > .detail-text-main { margin-top: 1rem; }

.detail-text-side { font-size: 0.75rem; margin-top: 1rem; margin-bottom: 50px; }
.details-body { margin-top: 8px; }
.details-row { display: flex; gap: 8px; padding: 2px 0; }
.details-label { color: #000; font-family: 'GT-Pressura-Bold', sans-serif; min-width: 120px; }
.details-value { color: #000; }

.thumbnail-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 25px; }
.thumbnail-row img { width: 100%; cursor: pointer; border-radius: 5px; }
@media (hover: hover) { .thumbnail-row img:hover { outline: 1px solid #000; outline-offset: 10px; } }

/* Vorheriges / nächstes Projekt */
.project-pager { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 10px; border-top: 1px solid #000; font-size: 0.85rem; }
.project-pager a:link, .project-pager a:visited { text-decoration: none; }
.project-pager .next { text-align: right; margin-left: auto; }

@media (max-width: 767px) {
    .detail-images { flex-direction: column; }
    .detail-images .image-panel-right { display: none; }
    .details-label { min-width: 100px; }
    .project-lead { font-size: 1.1rem; }
}

@media (max-width: 767px) { .hide-mobile { display: none !important; } }