/*version 20240812 - Optimiert für horizontales Scrollen & feste Thumbnail-Größen*/

body {
    font-family: Verdana;
    background-color: #B8C9C7;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert Wackeln der gesamten Seite */
}

.center {
    text-align: center;
}

hr {
    border: 0;
    height: 3px;
    background-color: #f5f1f1;
    margin: 20px 0;
}

button {
    background-color: #fdff7f;
    border: none;
    color: rgb(14, 1, 1);
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 5px;
    cursor: pointer;
}

.home-link {
    text-decoration: none;
    font-size: 24px;
    padding: 5px 10px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
}

button:hover {
    background-color: #cdf8ce;
}

.white-background-uberschrift,
.white-background_text {
    background-color: white;
    color: black;
    padding: 5px;
}

.containerHeader {
    width: 100vw;
    background-image: url('FriedingAlt.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid black;
    padding: 10px;
    box-sizing: border-box;
}

/* ==========================================================================
   TABELLEN-STRUKTUR & SCROLL-VERHALTEN (Gilt global & PC-Standard)
   ========================================================================== */
table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;           /* Zwingt die Tabelle, im Elternelement zu bleiben */
    table-layout: fixed;       /* Verhindert unkontrolliertes Breitenwachstum */
    margin-right: 5px;
}

/* Jede Tabellenzeile wird zum flexiblen, horizontalen Scroll-Container */
tr {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;          /* Zeigt Scrollbalken am PC direkt unter der Zeile */
    overflow-y: hidden;
    white-space: nowrap;       /* Verhindert Umbruch der Bilder in eine neue Zeile */
    -webkit-overflow-scrolling: touch;
    position: relative;
    box-sizing: border-box;
}

/* Zwingt die Vorschaubilder, ihre Originalgröße strikt zu behalten */
td {
    border: 1px solid #000;
    display: block !important;
    flex: 0 0 100px !important; /* Kein Schrumpfen, kein Wachsen am PC & Mobil */
    width: 100px !important;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

/* Erste Spalte (z. B. Name/Jahr) bleibt beim Scrollen links haften */
td:first-child {
    flex: 0 0 150px !important;
    width: 150px !important;
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #B8C9C7;  /* Deckende Farbe, damit dahinterliegende Bilder nicht durchscheinen */
}

.responsive-img, 
td img {
    width: 100px !important;
    height: auto;
    display: block;
}

.strasse-bild {
    width: 350px;
    height: auto;
}

.container_table {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: aquamarine;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}


/* ==========================================
   1. LANDSCAPE-MODUS (Querformat)
   ========================================== */
@media only screen and (orientation: landscape) {
     .schwebendes-gif-home {
         position: absolute;
         top: 4%;
         left: 95%;
         transform: translate(-50%, -50%);
     }

     .image-container {
         position: relative;
         display: inline-block;
     }

     .text-overlay {
         position: absolute;
         color: rgb(9, 9, 9);
         background-color: rgba(255, 255, 255);
         font-size: 13px;
         top: 80%;
         left: 50%;
         transform: translateX(-50%);
     }

     .text-overlay p {
         margin: 0;
     }

     .innerText {
         font-size: 30px;
     }

     /* Mobile Optimierung im Querformat (z. B. Handys im Querformat) */
     @media (max-width: 1024px) {
         table {
             display: block;
             width: 100vw;
         }

         tr {
             width: 100vw;
         }

         /* Gelber Pfeil bei Scrollbedarf im Landscape */
         tr.has-scroll::after {
             content: '▶';
             position: sticky;
             right: 0;
             top: 0;
             bottom: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0 10px;
             color: yellow;
             font-size: 1.6rem;
             font-weight: bold;
             text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
             background: linear-gradient(to left, #e6ebea, transparent);
             pointer-events: none;
             z-index: 5;
             opacity: 1;
             transition: opacity 0.3s ease-in-out;
         }

         tr.has-scroll:active::after {
             opacity: 0;
         }
     }
}


/* ==========================================
   2. PORTRAIT-MODUS (Hochformat)
   ========================================== */
@media only screen and (orientation: portrait) {
     .schwebendes-gif-home {
         position: absolute;
         top: 3%;
         left: 98%;
         transform: translate(-50%, -50%);
         height: 7%; /* Pluszeichen entfernt für valides CSS */
         width: 7%;
     }

     .image-container {
         position: relative;
         font-family: Verdana, Arial, Helvetica, sans-serif;
         font-size: 10px;
     }

     .text-overlay {
         position: absolute;
         top: 90%;
         left: 40%;
         color: rgb(9, 9, 9);
         background-color: rgba(255, 255, 255, 0.7);
     }

     .text-overlay p {
         margin: 0;
     }

     button {
         background-color: #fdff7f;
         border: none;
         color: rgb(14, 1, 1);
         padding: 10px 10px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 15px;
         margin: 8px 3px;
         cursor: pointer;
     }

     button:hover {
         background-color: #cdf8ce;
     }

     /* Mobile Optimierung im Hochformat (Smartphones im Hochformat) */
     @media (max-width: 768px) {
         table {
             display: block;
             width: 100vw;
         }

         tr {
             width: 100vw;
         }

         /* Gelber Pfeil bei Scrollbedarf im Portrait */
         tr.has-scroll::after {
             content: '▶';
             position: sticky;
             right: 0;
             top: 0;
             bottom: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0 10px;
             color: yellow;
             font-size: 1.6rem;
             font-weight: bold;
             text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
             background: linear-gradient(to left, #e6ebea, transparent);
             pointer-events: none;
             z-index: 5;
             opacity: 1;
             transition: opacity 0.3s ease-in-out;
         }

         tr.has-scroll:active::after {
             opacity: 0;
         }
     }
}