/* Global box-sizing for easier layout calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

a:link { color: #666; text-decoration: none; }
a:visited { color: #666; }
a:hover { color: #00f; text-decoration: underline; }
a:active { color: #00f; }

/* atur body */
body {
    background-color: #000;
    margin: 0;
    padding: 0;
    /* Jika -140px tadi diperlukan, silakan sesuaikan kembali */
    margin-top: 0px;
    margin-bottom: 50px;
    overflow-x: hidden;
}

/* wrapper seluruh konten + footer */
.main-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-right: 25px;
    min-height: 100vh;
}

/* === desktop: main layout === */
.main-layout-table {
    width: 870px;               /* lebar aslinya */
    zoom: 1.25;                 /* pakai zoom, bukan transform */
    height: auto !important;    /* ikut tinggi isi */
    overflow: visible !important;
    margin: 30px auto;          /* spasi atas & bawah */
    border: 3px solid green;
    cursor: default;
}

/* area cerita */
.bereich { display: block; color: #000; text-align: center; cursor: pointer; }
/* .bereich table tr { background-color: #8fbc8f; } */
/* .bereich table tr:hover { background-color: #558866; } */
.bereich table tr td {
  padding-bottom: 0px !important;
}
/* sidebar override */
.frame-wrapper { position: relative; }
.sidebar-links ul { list-style: none; padding: 0; }
.sidebar-links li { background-color: #000022; margin: 2px 0; }
.sidebar-links li:hover { background-color: #191970; }
.sidebar-links a { display: block; padding: 8px; color: #b0e0e6; font-family: Arial,Helvetica,sans-serif; }

/* sembunyikan WP default */
.main-menu, .site-footer { display: none !important; }

/* top iframes */
.top-iframes-table {
    margin: 0 auto !important;
    float: none !important;
    position: static !important;
}
/* Versi Desktop */
@media (min-width: 769px) {
  .top-iframes-table td > a {
    display: block;
    text-indent: -330px;
    text-decoration: none;
  }
}

/* Versi Mobile */
@media (max-width: 768px) {
  .top-iframes-table td > a {
    display: block;
    text-indent: -20px;
    padding-left: 5px;
    text-decoration: none;
  }
}





.top-iframes-table tr:nth-child(2) td a { padding-left: 4em; }
.top-iframes-table tr:nth-child(3) td a { padding-left: 9em; }
.top-iframes-table tr:nth-child(4) td a { padding-left: 10em; }
.top-iframes-table tr:nth-child(5) td a { padding-left: 13em; }
.top-iframes-table tr:nth-child(6) td a { padding-left: 16em; }

/* navigasi tahun */
.year-navigation-table { width: 100%; cursor: default; }
.year-navigation-table td { vertical-align: middle; }

/* stories */
.stories-table {
    width: 100%;
    border: 1px solid green;
    background-color: #888888;
    cursor: default;
}

/* footer—pastikan di bawah */
.footer-contact-table {
    width: 870px;
    max-width: 100%;
    margin-top: -65px;
    clear: both;
    text-align: center;
    border: none;
}

/* === mobile (<768px) === */
@media screen and (max-width: 768px) {
    body {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .main-content-wrapper {
        padding: 10px;
        min-height: auto;
    }
    .main-layout-table {
        width: 100%;
        zoom: 1;             /* kembalikan zoom=1 */
        height: auto;
        margin: 0 auto;
        border: 3px solid green;
    }
    .main-layout-table tr[valign="top"] > td {
        display: block; width: 100%; padding: 0;
    }

    .top-iframes-table {
        width: 100%;
        border: 1px solid #333;
    }
    .top-iframes-table colgroup { display: none; }
    .top-iframes-table tr {
        display: flex; flex-direction: column; width: 100%;
    }
    .top-iframes-table td {
        display: block; width: 100%; padding: 5px; text-align: center;
    }
    .top-iframes-table td iframe {
        width: 100%; height: 200px; max-width: 100%;
    }
    .top-iframes-table td > a {
        left: 0 !important; padding-left: 10px !important; text-align: left;
    }

    .year-navigation-table {
        display: block; margin-top: 10px;
    }
    .year-navigation-table tr {
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    }
    .year-navigation-table td {
        display: block; width: auto; padding: 5px; text-align: center;
    }
    .foto-geschichten-title {
        width: 100%; text-align: center; margin-bottom: 10px;
    }
    .foto-geschichten-title font b i { margin-right: 0 !important; }
    .year-link-cell { flex-grow: 1; text-align: center; }
    .year-spacer { display: none; }

    .stories-table {
        width: 100%; margin-top: 10px; border: 1px solid green;
    }
    .stories-table td {
        padding: 0px;
    }

    .footer-contact-table {
        width: 100%; padding: 10px; margin-top: 10px; clear: both; text-align: center; border: none;
    }
    .footer-contact-table td {
        display: block; width: 100%; text-align: center; padding: 5px 0;
    }
    .footer-contact-table ul { padding-left: 0; list-style: none; }
    .footer-contact-table li { margin-bottom: 5px; }
}
@media (max-width: 768px) {
  /* Menargetkan link yang berisi gambar Globus.gif */
  a[href="#"][onclick*="link5"] {
    margin-top: 50px !important; /* Sesuaikan nilai ini sesuai kebutuhan Anda */
    /* Anda bisa menambahkan properti CSS lain di sini jika diperlukan */
  }

  /* Menargetkan gambar Globus.gif di dalam link yang spesifik */
  a[href="#"][onclick*="link5"] img {
    height: 80px !important; /* Sesuaikan nilai tinggi ini sesuai kebutuhan Anda */
    width: auto !important; /* Pertahankan rasio aspek gambar */
  }
}

/* Hanya sembunyikan paragraf yang punya child iframe tanpa src */
body.single-fg_gallery p:has(> iframe[name="Fenster"]:not([src])),
body.single-fg_gallery p:has(> iframe[name="Texter"]:not([src])) {
  display: none !important;
}

/* ==== Base styles for title + date ==== */
.fg-title-date-wrapper {
  display: inline-block;       /* supaya padding-left bekerja */
  white-space: nowrap;         /* mencegah wrap */
  overflow: hidden;            /* sembunyikan overflow */
  text-overflow: ellipsis;     /* tambahkan "..." jika terpotong */
  max-width: 100%;             /* patuhi lebar container */
}

/* ==== Desktop: padding kiri besar ==== */
@media (min-width: 769px) {
  .fg-title-date-wrapper {
    padding-left: 450px;       /* sesuaikan jarak judul ke kanan */
  }
}

/* ==== Mobile: padding kiri lebih kecil ==== */
@media (max-width: 768px) {
  .fg-title-date-wrapper {
    padding-left: 90px;       /* jarak lebih kecil di layar sempit */
  }
}


* ===== DESKTOP: reset body margins & thumbnail gallery 100px high ===== */
@media (min-width: 769px) {
  body.single-fg_gallery {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }


}

/* ===== TABLET: thumbnail gallery 90px high, reset body margins ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Buat body tanpa spasi atas/bawah khusus single gallery */
  body.single-fg_gallery {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Thumbnail gallery di tablet */
  .fg-single-gallery .fg-thumb {
	margin-right: 5px;
        margin-left: 5px;
    width: auto !important;
    height: auto !important;
    }
}


/* ===== MOBILE: thumbnail gallery 80px high ===== */
@media (max-width: 768px) {
  body.single-fg_gallery {
    margin: 0 !important;
  }
}

@media screen and (min-width: 1024px) {
  #fg-show-comments {
    /* override inline-margin-left; sesuaikan angkanya sesuai kebutuhan */
    margin-left: 400px !important;
  }
}


/* ==== Mobile: override navigasi tahun baru supaya seperti versi lama ==== */
@media screen and (max-width: 768px) {
  /* Tampilkan kembali tabel navigasi tahun di mobile */
  .year-navigation-table {
    display: table !important;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll di iOS */
  }

  /* Tunaikan baris dan sel kembali ke display default */
  .year-navigation-table tr,
  .year-navigation-table td {
    display: table-row !important;
    width: auto !important;
    padding: 5px !important;
    text-align: center;
  }

  /* Wrapper toggle juga fleksibel untuk memastikan tidak memotong konten */
  .year-toggle-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal !important;
    margin: 10px 0 !important;
 }

  /* Pastikan tiap blok tahun (slice) tidak punya padding kiri aneh */
  .year-toggle-wrapper .years-block {
    padding-left: 0 !important;
  }

  /* Link tahun dan periode tampil sebagai blok-fit inline */
  .year-toggle-wrapper .year-link,
  .year-toggle-wrapper .year-period {
    display: inline-block !important;
    margin: 4px 6px !important;
    padding: 4px 8px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .bereich td:nth-child(2) a span {
	display: block;
        padding-left: 5px !important;
        white-space: nowrap;
        overflow: hidden;
        /* text-overflow: revert; */
        padding-bottom: 10px;
        max-width: 100%;
  }

  .bereich td:nth-child(2) a span font {
    display: flex;
    align-items: center;
    gap: 1px; /* Jarak antara title dan tanggal */
    padding-top: 4px;
  }

  .bereich td:nth-child(2) a span font b {
    line-height: 1.2;
  }

  .bereich td:nth-child(2) a span font span {
    vertical-align: middle;
    line-height: 1.2;
  }

  .bereich table tr td:nth-child(2) {
    width: 100%;
  }
}


.top-iframes-table {
  table-layout: fixed;
  width: 100%;
}

/* Jumlah kedua kolom harus 100%: misal 40% + 60% */
.top-iframes-table col.col-text  { width: 45%; }
.top-iframes-table col.col-image { width: 55%; }

/* Kembalikan tinggi iframe ke aslinya, atau gunakan min-height */
.fenster-iframe-cell iframe {
  height: auto;         /* biarkan browser sesuaikan */
  min-height: 300px;    /* minimal setinggi semula */
}

/* make sure your table uses fixed layout so the <colgroup> widths take effect */
.bereich table {
  table-layout: fixed;
  width: 100%;
}

/* remove the inline padding on your <span> so it doesn’t interfere */
.bereich table td:nth-child(2) span {
  padding-left: 0 !important;
}

/* add a little padding inside the second cell and left-align */
.bereich table td:nth-child(2) {
  padding: 0em;      /* tweak as you like */
  text-align: right;
  white-space: nowrap; /* prevents line-wrap shifting your icons/text */
}

/* vertically center icon + text in each row */
.bereich table tr td {
  vertical-align: middle;
}


.story-title-row {
  display: flex;
  align-items: center;
  width: 120%;
  justify-content: center;
  position: relative;
}

@media (max-width: 768px) {
  .story-title-row {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }
}

.story-date {
  color: #000;
  font-size: 12px;
  font-style: italic;
  font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  font-weight: normal;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 120px; /* atur sesuai kebutuhan */
}

.story-title {
  color: #fff;
  font-size: 15px;
  font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
  font-weight: bold;
  margin-left: auto;
  text-align: right;
  min-width: 0;
  flex-shrink: 1;
}

@media (max-width: 768px) {
  .story-date {
	padding-top: 20px;
  }

  .story-title {
    margin-right: 10px;
    align-self: end;
  }
}

.year-toggle-wrapper {
  padding-left: 260px; /* Atur sesuai kebutuhan, misal 80px, 100px, dst */
}

.notranslate {
  unicode-bidi: isolate;
}

@media (max-width: 600px) {
  .year-toggle-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    white-space: normal !important;
    padding-left: 0 !important;
    gap: 8px !important;
  }
  .year-toggle-wrapper > div,
  .year-toggle-wrapper > span {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .year-toggle-wrapper a {
    margin: 2px 6px 2px 0 !important;
    font-size: 15px !important;
    display: inline-block !important;
    min-width: 48px;
    text-align: center;
  }
}

.bereich table td {
  vertical-align: top !important;
}
.fg-iframe {
  display: block;
}

.story-title-row {
  padding-top: 2px;
  padding-bottom: 4px;
}
.accordion-icon-cell-left,
.accordion-icon-cell-right {
  padding-top: 2px;
  padding-bottom: 4px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .accordion-icon-cell-left,
  .accordion-icon-cell-right {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
    vertical-align: middle;
  }
}