/* ========== 1. MAIN GALLERY WRAPPER STABILIZATION ========== */
 .gallery-container {
     width: 100%;
     display: flex;
     justify-content: center;
    /* Horizontale Zentrierung auf dem Bildschirm */
     align-items: center;
    /* Vertikale Zentrierung unter der Navigation */
     min-height: calc(100vh - 74px);
    /* Berücksichtigt die exakte Höhe der Navigationsleiste */
     padding: 20px;
    /* Optimierter Außenabstand für die Inhaltsplatzierung */
}
 .grid-item img {
     width: 100%;
     height: auto;
     display: block;
}
/* ========== 2. INHALTS-RASTER (fischmarkt.html - Kompakt & Symmetrisch) ========== */
 .fishmarket-grid {
     display: grid;
    /* Mathematisch verengte Spaltenbreiten für dichten Zusammenhalt */
     grid-template-columns: 100px 85px 15px 300px;
    /* Exakt auf Bilddimensionen abgestimmte Zeilenhöhen */
     grid-template-rows: 75px 134px 218px;
     gap: 4px;
    /* SYMMETRIE-GARANTIE: Genau 4px Lücke in alle Richtungen */
     align-items: start;
    /* Richtet die Elemente obenbündig in ihren Zellen aus */
     margin: -40px auto 40px auto;
    /* Schiebt das gesamte Raster exakt 40px weiter nach oben */
}
/* Asymmetrische Grid-Koordinaten der Fischmarkt-Bilder */
 .item-text-graphic {
     grid-column: 1 / 3;
     grid-row: 1;
}
 .item-men-work {
     grid-column: 4;
     grid-row: 1 / 3;
     justify-self: start;
}
 .item-man-portrait {
     grid-column: 1 / 3;
     grid-row: 2;
     margin-top: 4px;
    /* Vertikale Feinjustierung */
}
 .item-cutting-fish {
     grid-column: 2 / 5;
     grid-row: 3;
     justify-self: start;
     margin-left: 10px;
    /* Optische Überlagerung laut Original-Layout */
}
/* ========== 3. INHALTS-RASTER (street.htm - Absolute Horizontal Alignment Fix) ========== */
 .street-grid {
     display: grid;
    /* Two fixed columns perfectly matching the image dimensions (240px + 360px = 600px) */
     grid-template-columns: 240px 360px;
    /* Row 1 is fixed at 150px to push the right image down by exactly 30px */
     grid-template-rows: 150px 204px;
     gap: 4px;
    /* Exactly 4px layout gap in all directions */
     align-items: end;
    /* Places the headline text block flat on the row axis line */
    /* THE ULTIMATE CENTERING ENGINE: */
     width: 600px;
    /* Forces the layout container to lock onto its exact width limits */
     max-width: 100%;
    /* Safe rendering lock for all modern browsers */
     margin: -142px auto 40px auto;
    /* Automatically balances left and right spatial margins perfectly */
     flex-shrink: 0;
    /* Prevents the parent flex container from squishing or shifting the grid */
}
 .street-title {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     font-weight: normal;
     color: #000000;
     padding-left: 10px;
    /* Restores the original text whitespace indentation cleanly */
     margin-bottom: 2px;
    /* Sits perfectly right above the right zebra crossing image */
     line-height: 1.1;
    /* Keeps line breaks dense and compact near the image edge */
}
 .text-large {
     font-size: 30px;
     display: inline-block;
     line-height: 1;
}
/* Asymmetric grid coordinate alignments for the Street artwork elements */
 .item-motorcycle {
     grid-column: 1;
     grid-row: 1 / 3;
    /* Spans vertically across both layout rows (Total height: 390px) */
}
/* Sits completely flush on the column axis line right above the zebra image */
 .item-street-headline {
     grid-column: 2;
     grid-row: 1;
     justify-self: start;
    /* Keeps the headline text strictly aligned to the left of column 2 */
}
/* Renders directly underneath the layout column separation line */
 .item-zebra-crossing {
     grid-column: 2;
     grid-row: 2;
     align-self: start;
    /* Begins perfectly at the upper edge line directly beneath the text */
}
/* ========== 4. RESPONSIVE MEDIA QUERIES (Mobil-Optimierung < 768px) ========== */
 @media screen and (max-width: 768px) {
     .gallery-container {
         padding: 15px 10px;
         align-items: start;
        /* Erlaubt natürliches Scrollen auf kurzen Smartphone-Displays */
    }
    /* Schaltet die komplexen Desktop-Raster in ein lineares Layout untereinander um */
     .fishmarket-grid, .street-grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 25px;
        /* Angenehmer Leseabstand auf Mobilgeräten */
         max-width: 320px;
        /* Verhindert das Ausbrechen aus schmalen Displays */
         margin: 10px auto;
        /* Hebt den negativen Desktop-Margin mobil komplett auf */
    }
     .street-title {
         text-align: center;
         padding-left: 0;
    }
    /* Neutralisierung aller Desktop-Verschiebungen und Ausrichtungen für Mobilgeräte */
     .item-text-graphic, .item-men-work, .item-man-portrait, .item-cutting-fish, .item-motorcycle, .item-street-headline, .item-zebra-crossing {
         grid-column: auto !important;
         grid-row: auto !important;
         justify-self: center !important;
         margin-left: 0 !important;
         margin-top: 0 !important;
    }
}
/* ========== 5. ERWEITERTE RESPONSIVE ANPASSUNGEN (Kleine Smartphones < 480px) ========== */
 @media screen and (max-width: 480px) {
     .gallery-container {
         padding: 10px 5px;
    }
     .fishmarket-grid, .street-grid {
         gap: 16px;
        /* Etwas kompakterer vertikaler Abstand auf Mini-Screens */
         max-width: 280px;
        /* Sichere Skalierungsbegrenzung für schmale Geräte */
    }
     .text-large {
         font-size: 24px;
        /* Reduziert die Titelgröße leicht auf kleinen Handys */
    }
}
/* ========== 6. BARRIEREFREIHEIT & VISUELLE FEEDBACK-SYSTEME ========== */
 .grid-item img {
     transition: transform 0.2s ease-in-out;
}
/* Minimaler, moderner Bewegungseffekt bei Interaktion */
 .grid-item:hover img {
     transform: scale(1.01);
}
/* ========== 7. INHALTS-RASTER (shinkansen.htm - Präzise nach oben verschoben) ========== */
 .shinkansen-grid {
     display: grid;
    /* Zwei Spalten exakt angepasst an die 360px Breiten der Bildelemente */
     grid-template-columns: 360px 360px;
    /* Zeilenhöhen für Textausrichtung und Bildhöhen */
     grid-template-rows: auto 240px;
     gap: 4px;
    /* SYMMETRIE-GARANTIE: Genau 4px Lücke in alle Richtungen */
     align-items: start;
    /* KORREKTUR: Schiebt die gesamte Sektion um weitere 40px nach oben (-142px statt -102px) */
     margin: -142px auto 40px auto;
}
/* Linksbündiger Textblock (rechtsbündig mit Padding-Offsets) */
 .shinkansen-headline {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.4;
     color: #000000;
     text-align: right;
     padding-right: 32px;
     align-self: end;
    /* Sitzt perfekt auf der unteren Zeilenlinie über dem Zugbild */
     margin-bottom: 4px;
}
/* Rechte Inhaltsbox Formatierung */
 .salariman-figure {
     display: flex;
     flex-direction: column;
     gap: 4px;
     width: 360px;
}
 .salariman-caption {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.4;
     color: #000000;
     text-align: left;
     padding-left: 64px;
}
 .size30 {
     font-size: 30px;
     font-weight: normal;
}
/* Explizite Grid-Zuordnungen der Shinkansen-Bilder */
 .item-shinkansen-text {
     grid-column: 1;
     grid-row: 1;
}
 .item-salariman-box {
     grid-column: 2;
     grid-row: 1 / 3;
}
 .item-shinkansen-image {
     grid-column: 1;
     grid-row: 2;
     justify-self: end;
}
/* ========== 8. RESPONSIVE MEDIA QUERY FÜR TRANSPORT INTERFACES (Displays < 768px) ========== */
 @media screen and (max-width: 768px) {
     .shinkansen-grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 30px;
        /* Clear breathing room for mobile scanning */
         max-width: 360px;
         margin: 10px auto;
        /* Resets desktop offsets for clean mobile flow */
    }
     .shinkansen-headline {
         text-align: center;
         padding-right: 0;
         margin-bottom: 0;
    }
     .salariman-caption {
         text-align: center;
         padding-left: 0;
    }
     .item-shinkansen-text, .item-salariman-box, .item-shinkansen-image {
         grid-column: auto !important;
         grid-row: auto !important;
         justify-self: center !important;
    }
}
/* ========== 9. INHALTS-RASTER (edogawa.htm - Textüberlauf fein reduziert) ========== */
 .edogawa-grid {
     display: grid;
    /* Spalte 1 fixiert das Bild (360px). Spalte 2 fängt den feinen Textüberlauf auf (35px) */
     grid-template-columns: 360px 35px;
     grid-template-rows: auto 240px;
     gap: 4px;
    /* SYMMETRIE-GARANTIE: Genau 4px Lücke in alle Richtungen */
     align-items: start;
     margin: -142px auto 40px auto;
    /* Schiebt die gesamte Sektion genau wie zuvor nach oben */
}
/* Headline Layout-Block */
 .edogawa-headline {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.4;
     color: #000000;
     text-align: right;
     padding-right: 0px;
    /* Absolut kein Padding rechts */
     margin-left: 55px;
    /* Behält den gewünschten linken Startabstand bei */
     align-self: end;
    /* Sitzt perfekt auf der Trennlinie über dem Bild */
     margin-bottom: 4px;
}
/* Textgrößen-Klassen */
 .size24 {
     font-size: 24px;
     font-weight: normal;
}
 .size30 {
     font-size: 30px;
     font-weight: normal;
}
 .size40 {
     font-size: 40px;
     font-weight: normal;
}
/* Explizite Grid-Spurzuordnungen */
 .item-edogawa-text {
     grid-column: 1 / 3;
    /* Erstreckt sich über beide Spalten (360px + 35px = 395px Gesamtbreite) */
     grid-row: 1;
}
 .item-young-man {
     grid-column: 1;
    /* Das Bild bleibt felsenfest in der ersten 360px Spalte verankert */
     grid-row: 2;
     justify-self: end;
    /* Richtet das Bild präzise an der inneren Rasterkante aus */
}
/* ========== 10. RESPONSIVE ABFRAGE FÜR EDOGAWA (Displays < 768px) ========== */
 @media screen and (max-width: 768px) {
     .edogawa-grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 25px;
         max-width: 360px;
         padding: 0 10px;
         margin: 10px auto;
        /* Hebt den negativen Desktop-Margin mobil auf */
    }
     .edogawa-headline {
         text-align: center;
         padding-right: 0;
         margin-left: 0;
        /* Setzt den linken Desktop-Offset mobil zurück */
         margin-bottom: 0;
    }
     .item-edogawa-text, .item-young-man {
         grid-column: auto !important;
         grid-row: auto !important;
         justify-self: center !important;
    }
}
/* ========== 11. INHALTS-RASTER (koi.htm - Präzise um weitere 20px nach oben verschoben) ========== */
 .koi-grid {
     display: grid;
    /* Einzelne zentrierte Spalte, exakt angepasst an die 360px Breite des Bildes */
     grid-template-columns: 360px;
     grid-template-rows: auto auto;
     gap: 4px;
    /* SYMMETRIE-GARANTIE: Genau 4px Lücke in alle Richtungen */
     justify-content: center;
    /* Zentriert das Raster innerhalb des Layout-Containers */
     align-items: start;
    /* KORREKTUR: Schiebt die gesamte Sektion um weitere 20px nach oben (-202px statt -182px) */
     margin: -202px auto 40px auto;
}
/* Überschrift-Layout-Block (Perfekte horizontale Zentrierung) */
 .koi-headline {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.4;
     color: #000000;
     text-align: center;
     margin-bottom: 4px;
}
/* Schriftgrößen-Klassen */
 .size20 {
     font-size: 20px;
     font-weight: normal;
}
 .size24 {
     font-size: 24px;
     font-weight: normal;
}
 .size30 {
     font-size: 30px;
     font-weight: normal;
}
/* Explizite Grid-Spurzuordnungen */
 .item-koi-text {
     grid-column: 1;
     grid-row: 1;
}
 .item-koi-image {
     grid-column: 1;
     grid-row: 2;
     justify-self: center;
    /* Zentriert das Bild präzise unter dem Text */
}
/* ========== 9. INHALTS-RASTER (isetan.html) ========== */
 .isetan-grid {
     display: grid;
    /* Zwei Spalten exakt angepasst an die 360px Breiten der Bildelemente */
     grid-template-columns: 360px 360px;
    /* Zeile 1 hält den Text flexibel, Zeile 2 fixiert das 240px hohe Kaufhausbild */
     grid-template-rows: auto 240px;
     gap: 4px;
    /* SYMMETRIE-GARANTIE: Genau 4px Lücke wie bei den anderen Seiten */
     align-items: start;
    /* KORREKTUR: Kompensiert den Versatz exakt wie bei shinkansen.htm für perfekte Zentrierung */
     margin: -142px auto 40px auto;
}
/* Hilfsklasse für die kleine Zwischengröße */
 .size11 {
     font-size: 11px;
}
/* Linker Textblock: ABSOLUT RECHTSBÜNDIG (Keine Zentrierung) */
 .item-isetan-text {
     grid-column: 1;
     grid-row: 1;
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.15;
    /* Leicht geöffnete, perfekt lesbare Zeilenhöhe */
     color: #000000;
     text-align: right;
    /* Text fließt strikt rechtsbündig zur Mittelachse hin */
     padding-right: 32px;
    /* Exakter Padding-Versatz des Altsystems */
     align-self: end;
    /* Verankert den Text direkt auf der Trennlinie über dem Isetan-Bild */
     margin-bottom: 4px;
}
/* Rechte Inhaltsbox Struktur */
 .item-poet-box {
     grid-column: 2;
     grid-row: 1 / 3;
    /* Erstreckt sich vertikal über beide Zeilen (rowspan) */
}
 .poet-figure {
     display: flex;
     flex-direction: column;
     gap: 4px;
    /* Identischer 4px Spalt zwischen Bild und Text */
     width: 360px;
}
/* Rechter Untertext: ABSOLUT LINKSBÜNDIG (Keine Zentrierung) */
 .poet-caption {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.4;
     color: #000000;
     text-align: left;
    /* Text bleibt sauber linksbündig unter dem Kimi-Bild */
     padding-left: 64px;
    /* Spiegelt exakt den Einrückungswert der Salariman-Box */
}
/* Linkes Kaufhaus-Bild */
 .item-isetan-image {
     grid-column: 1;
     grid-row: 2;
     justify-self: end;
    /* Schiebt das Bild bündig an die Mittelachse heran */
}
/* ========== 9. INHALTS-RASTER (isetan.html / japan.html - 20px Spaltenabstand) ========== */
 .isetan-grid {
     display: grid;
    /* Zwei 360px Spalten mit exakt 20px Abstand dazwischen */
     grid-template-columns: 360px 360px;
     grid-template-rows: auto 240px;
     gap: 0 20px;
    /* 0px vertikaler Spalt, exakt 20px horizontaler Spaltenabstand */
     align-items: start;
    /* KORREKTUR: Symmetrische Ausrichtung und exakter vertikaler Shinkansen-Versatz */
     margin: -142px auto 40px auto;
}
/* Hilfsklasse für die kleine Fließtextgröße */
 .size11 {
     font-size: 11px;
}
/* Linker Textblock: Strikte Ausrichtung, genullter Absatzabstand und exakter rechter Wunsch-Versatz */
 .item-isetan-text {
     grid-column: 1;
     grid-row: 1;
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.15;
     color: #000000;
     text-align: right;
     margin-right: -46px;
     align-self: end;
     margin-bottom: 4px;
}
/* Überschreibt das globale 'p {
     margin: 0 0 12px 0;
}
 ' exakt für diesen Textteil auf 0 */
 .item-isetan-text p {
     margin: 0 !important;
     padding: 0;
}
/* Steuert exakt und isoliert die erste Zeile des Textblocks an */
 .item-isetan-text .top-line {
     display: inline-block;
    /* Ermöglicht die pixelgenaue Positionierung */
     position: relative;
     top: -7px;
    /* Schiebt die erste Zeile exakt 8px nach oben */
     margin-right: 46px;
    /* Zieht die erste Zeile noch weiter nach rechts über die -38px hinaus */
}
/* Rechte Inhaltsbox (Kimi Portrait + Untertext) */
 .item-poet-box {
     grid-column: 2;
     grid-row: 1 / 3;
    /* Erstreckt sich vertikal über beide Zeilen (rowspan) */
}
 .poet-figure {
     display: flex;
     flex-direction: column;
     gap: 4px;
    /* Vertikaler Abstand zwischen Kimi-Bild und Untertext */
     width: 360px;
}
/* Rechter Untertext: Bleibt strikt linksbündig */
 .poet-caption {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.4;
     color: #000000;
     text-align: left;
    /* Text bleibt absolut linksbündig unter dem Kimi-Bild */
     padding-left: 45px;
    /* Präzise optische Einrückung nach rechts */
}
/* Linkes Kaufhaus-Bild (Bündig am rechten Rand der ersten Spalte verankert) */
 .item-isetan-image {
     grid-column: 1;
     grid-row: 2;
     justify-self: end;
    /* Garantiert den perfekten 20px-Spalt zum rechten Bild */
}
 @media screen and (max-width: 768px) {
    /* Integriert das Isetan-Grid nahtlos in die lineare Mobil-Stapelung */
     .isetan-grid {
         grid-template-columns: 100% !important;
         grid-template-rows: auto !important;
         gap: 25px !important;
         max-width: 320px !important;
         margin: 10px auto !important;
        /* Hebt den negativen Desktop-Margin mobil komplett auf */
    }
    /* Zentriert den Textblock und löscht die horizontalen Desktop-Verschiebungen */
     .item-isetan-text {
         text-align: center !important;
         padding-right: 0 !important;
         margin-right: 0 !important;
         margin-bottom: 0 !important;
    }
    /* Setzt die angehobene erste Zeile im Mobilmodus wieder flach auf die Standardlinie */
     .item-isetan-text .top-line {
         top: 0 !important;
         margin-right: 0 !important;
    }
    /* Zentriert die Bildunterschrift des Poeten perfekt unter dem Foto */
     .poet-caption {
         text-align: center !important;
         padding-left: 0 !important;
    }
    /* Neutralisiert alle Desktop-Spurzuordnungen für ein geradliniges Stapeln untereinander */
     .item-isetan-text, .item-poet-box, .item-isetan-image {
         grid-column: auto !important;
         grid-row: auto !important;
         justify-self: center !important;
         margin-left: 0 !important;
         margin-top: 0 !important;
    }
}
/* ========== 11. INHALTS-RASTER (geisha.html - Fixierte 360px Spalten & Zeilen-Offsets) ========== */
 .geisha-grid {
     display: grid;
    /* Garantiert, dass die beiden Spalten festgeschrieben nebeneinander stehen bleiben */
     grid-template-columns: 360px 360px;
     grid-template-rows: auto 240px;
     gap: 0 10px;
    /* Exakt 10px horizontaler Bildabstand */
     align-items: start;
     margin: -142px auto 40px auto;
    /* Hält das Gesamtkonstrukt absolut zentriert */
}
/* Linker Textblock Container: Hält die Spaltenbreite stabil ein */
 .item-geisha-text {
     grid-column: 1;
     grid-row: 1;
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.15;
     color: #000000;
     text-align: right;
    /* Grundausrichtung läuft sauber nach rechts */
     align-self: end;
    /* Verankert den Text auf der Trennlinie über dem Bild */
     margin-bottom: 4px;
}
/* Verhindert den globalen Absatz-Abstand */
 .item-geisha-text p {
     margin: 0 !important;
     padding: 0;
}
/* ZEILE 1: Wandert isoliert um 42px nach links ein, angehoben um 8px */
 .item-geisha-text .geisha-line-1 {
     display: inline-block;
     position: relative;
     top: 0px;
     margin-right: 22px;
    /* Schiebt Zeile 1 präzise nach links weg von der Kante */
}
/* ZEILE 2: Ragiert völlig unabhängig und wandert 10px nach rechts über die Spaltenkante */
 .item-geisha-text .geisha-line-2 {
     display: inline-block;
     position: relative;
     margin-right: 1px;
    /* Zieht Zeile 2 exakt an das rechte Kimi-Bild heran */
     margin-bottom:4px;
}
/* Rechte Inhaltsbox */
 .item-asakusa-street-box {
     grid-column: 2;
     grid-row: 1 / 3;
}
 .asakusa-street-figure {
     display: flex;
     flex-direction: column;
     gap: 0px;
     width: 360px;
}
 .asakusa-street-caption {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.0;
     color: #000000;
     text-align: right;
     padding-right: 8px;
     margin-top: 4px;
}
/* Linkes Hauptbild (Geisha San) */
 .item-geisha-main-image {
     grid-column: 1;
     grid-row: 2;
     justify-self: end;
    /* Schiebt das linke Bild bündig an den 10px Spalt heran */
}
/* ========== 12. RESPONSIVE ERGÄNZUNGEN FÜR GEISHA (Displays < 768px) ========== */
 @media screen and (max-width: 768px) {
    /* Integriert das neue Grid nahtlos in die lineare Mobil-Stapelung */
     .geisha-grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 25px;
         max-width: 320px;
         margin: 10px auto;
    }
    /* Schaltet Desktop-Verschiebungen im Mobilmodus sauber ab */
     .item-geisha-text {
         text-align: center;
         padding-right: 0;
         margin-right: 0;
         margin-bottom: 0;
    }
     .item-geisha-text .top-line {
         top: 0;
         margin-right: 0;
    }
     .asakusa-street-caption {
         text-align: center;
         padding-right: 0;
    }
     .item-geisha-text, .item-asakusa-street-box, .item-geisha-main-image {
         grid-column: auto !important;
         grid-row: auto !important;
         justify-self: center !important;
    }
}
/* ========== 12. RESPONSIVE MEDIA QUERY FÜR KOI INTERFACES (Displays < 768px) ========== */
 @media screen and (max-width: 768px) {
     .koi-grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 20px;
         max-width: 360px;
         padding: 0 10px;
         margin: 10px auto;
        /* Resets desktop offsets completely for a natural mobile scrolling flow */
    }
     .koi-headline {
         margin-bottom: 0;
    }
}
/* ========== 12. RESPONSIVE MEDIA QUERY FÜR KOI INTERFACES (Displays < 480px) ========== */
/* Schaltet die komplexen Desktop-Raster in ein lineares Layout untereinander um */
 @media screen and (max-width: 480px) {
     .fishmarket-grid {
        /* <-- Hier ergänzt */
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 25px;
         max-width: 320px;
         margin: 10px auto;
    }
}
 .fishmarket-grid, {
    /* <-- Hier ergänzt */
     gap: 16px;
     max-width: 280px;
}
/* ... bestehende Stile ... */
/* Neutralisierung für Japanese People Mobilgeräten */
 .item-poet-text, .item-poet-portrait, .item-isetan-store {
     grid-column: auto !important;
     grid-row: auto !important;
     justify-self: center !important;
     text-align: center !important;
     padding-right: 0 !important;
     padding-top: 0 !important;
     margin-top: 0 !important;
}
 .poet-caption {
     text-align: center !important;
     padding-left: 0 !important;
}
/* ========== 13. INHALTS-RASTER (sado.html - Fully Centered 10px Gap Framework) ========== */
 .sado-grid {
     display: grid;
    /* Double 360px columns bound tightly with your exact 10px horizontal image gap */
     grid-template-columns: 360px 360px;
     grid-template-rows: auto 240px;
     gap: 0 10px;
     align-items: start;
    /* Fixed content boundary rendering block to prevent horizontal shifting */
     width: 730px;
     max-width: 100%;
    /* Restores your exact, calibrated vertical display offset from previous page files */
     margin: -142px auto 40px auto;
}
/* Original text formatting utility class scale */
 .size20 {
     font-size: 20px;
}
/* Left Text Layout Area: Aligned strictly to the right edge boundary axis */
 .item-sado-text {
     grid-column: 1;
     grid-row: 1;
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.15;
     color: #000000;
     text-align: right;
    /* Text flows perfectly right-aligned to the central channel */
     align-self: end;
    /* Sits firmly locked flush against the top edge of the image */
     margin-bottom: 4px;
}
/* Hard-nulls the global 'p {
     margin: 0 0 12px 0;
}
 ' rules to maintain alignment stability */
 .item-sado-text p {
     margin: 0 !important;
     padding: 0;
}
/* Isolates row 1 formatting parameters */
 .item-sado-text .sado-line-1 {
     display: inline-block;
     position: relative;
     top: -8px;
    /* Retains the identical 8px vertical lift step */
     margin-right: 42px;
    /* Moves line 1 leftwards to maintain clean staggered rhythm */
}
/* Isolates row 2 formatting parameters */
 .item-sado-text .sado-line-2 {
     display: inline-block;
     position: relative;
     margin-right: -10px;
    /* Pulls line 2 rightwards flush towards the 10px gap corridor */
}
/* Right Content Column Box (Family Picture Stack) */
 .item-family-box {
     grid-column: 2;
     grid-row: 1 / 3;
    /* Spans across both system rendering rows */
}
 .family-figure {
     display: flex;
     flex-direction: column;
     gap: 0px;
     width: 360px;
}
/* Right Side Captions: Aligned leftwards underneath the picture */
 .family-caption {
     font-family: 'Times New Roman', Times, 'Courier New', Courier, serif;
     font-size: 14px;
     line-height: 1.1;
     color: #000000;
     text-align: left;
    /* Keeps text strictly left-aligned under the image */
     padding-left: 45px;
    /* Standardized text padding indentation offset */
     margin-top: 4px;
}
/* Specific left-aligned indentation step for the island text row label */
 .family-caption .family-line-2 {
     display: inline-block;
     padding-left: 35px;
    /* Mimics your original inline space push offsets cleanly */
}
/* Bottom Left Primary Graphic Placement */
 .item-fisher-image {
     grid-column: 1;
     grid-row: 2;
     justify-self: end;
    /* Seals the image directly flush against the 10px spacing track */
}
/* ========== 14. RESPONSIVE ERGÄNZUNGEN FÜR SADO (Displays < 768px) ========== */
 @media screen and (max-width: 768px) {
     .sado-grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;
         gap: 25px;
         max-width: 320px;
         margin: 10px auto;
    }
     .item-sado-text {
         text-align: center;
         padding-right: 0;
         margin-right: 0;
         margin-bottom: 0;
    }
     .item-sado-text .sado-line-1, .item-sado-text .sado-line-2 {
         top: 0;
         margin-right: 0;
    }
     .family-caption {
         text-align: center;
         padding-left: 0;
    }
     .family-caption .family-line-2 {
         padding-left: 0;
    }
     .item-sado-text, .item-family-box, .item-fisher-image {
         grid-column: auto !important;
         grid-row: auto !important;
         justify-self: center !important;
    }
}
/* Custom tuning offsets for the typography rows in ika.html */
 .item-sado-text .sado-line-1 {
     display: inline-block;
     position: relative;
     top: 0;
    /* Retains the identical 8px vertical lift step */
     margin: 0;
    /* Staggers the first line cleanly to the left */
}
 .item-sado-text .sado-line-2 {
     display: inline-block;
     position: relative;
     margin-right: -10px;
    /* Pulls the second line flush towards the 10px gap corridor */
}