/* Gemeinsame Anpassungen; nach den bisherigen Seitenstilen laden. */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; }
body { min-width: 0; }
h1::before { max-width: 90%; }
.site-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.site-shell header, .site-shell footer {
    position: static; width: 100%; height: auto; flex: none;
    padding: 8px 16px; gap: 8px; flex-wrap: wrap;
}
.site-shell .logo { margin: 0; height: 44px; }
.site-shell nav { padding: 0; gap: 8px; flex-wrap: wrap; }
.site-shell button { min-height: 44px; margin: 0; font-size: 14px; line-height: 1.25; }
.site-shell main { margin: 0; min-height: 0; min-width: 0; align-items: stretch; }
.site-shell iframe { width: 100%; height: 100%; display: block; }
.image-container { flex-wrap: wrap; padding: 16px; }
.image-box { min-width: 0; }
.image-box img { max-width: 100%; object-fit: contain; }
.category-page { display: block; height: auto; min-height: 100vh; }
.about-photo { display: none; }
/* Die Bildfläche darf die zuvor im HTML stehende Zurück-Taste nicht überdecken. */
.pfeil-links, .pfeil-rechts, .schliessen { z-index: 2; touch-action: manipulation; }
.bildContainer { z-index: 1; }
#ergebnisse img { object-fit: contain; }
@media (max-width: 1000px) {
    body.about-page { background-image: none; }
    .about-photo { display: block; width: 100%; height: auto; }
    body:not(.site-shell) { height: auto; min-height: 100vh; display: block; }
    .site-shell header { justify-content: center; padding: 8px; }
    .site-shell .logo { display: none; }
    .site-shell nav { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .site-shell nav button { padding: 6px; font-size: 13px; }
    .site-shell footer { gap: 6px; padding: 6px; }
    .site-shell footer button { flex: 1; padding: 6px; font-size: 12px; }
    .site-shell footer > a { display: none; }
    h1 { font-size: clamp(23px, 6vw, 32px); padding: 8px; }
    body > p { margin: 20px 16px; text-align: left; line-height: 1.5; }
    .image-container { flex-direction: column; gap: 24px; align-items: center; }
    .image-box { flex-direction: column; width: 100%; max-width: 550px; gap: 12px; }
    .image-box img { width: 100%; height: auto; }
    .image-box p { width: 100%; line-height: 1.5; text-align: left; }
    table { width: 100%; max-width: 100%; }
    body:not(.category-page) table, body:not(.category-page) tbody,
    body:not(.category-page) tr, body:not(.category-page) td,
    body:not(.category-page) th, body:not(.category-page) caption { display: block; width: 100%; }
    .avatar img { width: auto; max-width: 100%; height: auto; max-height: 300px; }
    .category-page table { display: block; width: 100%; padding: 8px; margin: 0; }
    .category-page tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-page tr { display: contents; }
    .category-page td { display: block; width: auto; height: auto; padding: 10px; min-width: 0; }
    .category-page td a { display: block; font-size: 15px; overflow-wrap: anywhere; }
    .category-page td img { max-width: 100%; object-fit: contain; }
    .category-page img:hover { transform: none; }
    #ergebnisse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
    #ergebnisse img { width: 100%; height: 130px; }
    #ergebnisse img:hover { transform: none; }
    #bildOverlay { z-index: 100; }
    .bildContainer { max-height: 100%; max-width: 100%; padding: 56px 12px 65px; }
    #grossBild { max-height: 55vh; max-width: 100%; min-width: 0; }
    #bildBeschreibungOverlay { max-height: 18vh; overflow: auto; }
    .pfeil-links, .pfeil-rechts { top: auto; bottom: 8px; transform: none; font-size: 24px; }
    .schliessen { top: 8px; right: 8px; font-size: 24px; }
}
/* Auf flachen Bildschirmen bleibt mehr Platz für das Foto. */
@media (orientation: landscape) and (max-height: 500px) {
    .site-shell nav { display: flex; justify-content: center; }
    .site-shell nav button { flex: 1; min-width: 0; }
    .site-shell header, .site-shell footer { padding: 3px; }
    .bildContainer { padding: 8px 65px; max-height: 100%; }
    #grossBild { max-height: 60vh; }
    #bildBeschreibungOverlay { max-height: 20vh; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    h1::before { animation: none; }
}