/* 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;
  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;
  zoom:1.25;
  height:auto !important;
  overflow:visible !important;
  margin:30px auto;
  border:3px solid green;
  cursor:default;
}

/* area cerita */
.bereich{ display:block; color:#000; text-align:center; cursor:pointer; }
.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 (dasar) */
@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:7em; }
.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) — layout umum === */
@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; 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:0px; margin-top:0px; 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; }
}

/* Globus di mobile */
@media (max-width:768px){
  a[href="#"][onclick*="link5"]{ margin-top:50px !important; }
  a[href="#"][onclick*="link5"] img{ height:80px !important; width:auto !important; }
}

/* Hide empty Fenster/Texter paragraphs (gallery) */
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; }

/* Title+date wrapper (umum) */
.fg-title-date-wrapper{
  display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* Desktop padding untuk title-date */
@media (min-width:769px){ .fg-title-date-wrapper{ padding-left:450px; } }

/* Mobile padding lebih kecil (umum) */
@media (max-width:768px){ .fg-title-date-wrapper{ padding-left:90px; } }

/* Desktop single gallery margins */
@media (min-width:769px){
  body.single-fg_gallery{ margin-top:0 !important; margin-bottom:0 !important; }
}

/* Tablet gallery thumbs */
@media (min-width:769px) and (max-width:1024px){
  body.single-fg_gallery{ margin:0 !important; padding:0 !important; }
  .fg-single-gallery .fg-thumb{ margin-right:5px; margin-left:5px; width:auto !important; height:auto !important; }
}

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

@media screen and (min-width:1024px){
  #fg-show-comments{ margin-left:400px !important; }
}

/* ==== Mobile: navigasi tahun mirip lama ==== */
@media screen and (max-width:768px){
  .year-navigation-table{ display:table !important; width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .year-navigation-table tr, .year-navigation-table td{
    display:table-row !important; width:auto !important; padding:5px !important; text-align:center;
  }
  .year-toggle-wrapper{ display:flex !important; flex-wrap:wrap; justify-content:center; white-space:normal !important; margin:10px 0 !important; }
  .year-toggle-wrapper .years-block{ padding-left:0 !important; }
  .year-toggle-wrapper .year-link, .year-toggle-wrapper .year-period{
    display:inline-block !important; margin:4px 6px !important; padding:4px 8px; font-size:14px;
  }
}

.top-iframes-table{ table-layout:fixed; width:100%; }
/* Jumlah kedua kolom harus 100% */
.top-iframes-table col.col-text{ width:45%; }
.top-iframes-table col.col-image{ width:55%; }

.fenster-iframe-cell iframe{ height:auto; min-height:300px; }

.bereich table{ table-layout:fixed; width:100%; }
.bereich table td:nth-child(2) span{ padding-left:0 !important; }

.bereich table td{ vertical-align:middle; }

/* === gaya dasar desktop untuk baris judul === */
.story-title-row{
  display:flex;
  align-items:center;
  width:120%;
  justify-content:center;
  position:relative;
}
.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;
}
.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;
}

/* tokens lain */
.year-toggle-wrapper{ padding-left:260px; }
.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:4px !important; padding-bottom:4px !important; vertical-align:middle; }
}

/* =========================================================
   >>>>>  MOBILE FIX — CENTER PERSIS & TIDAK MEMBESAR  <<<<<
   (desktop tidak diubah; hanya override di bawah 768px)
   ========================================================= */
@media (max-width:768px){

  /* geser halus ke kanan agar center visual pas (ubah jika perlu) */
  :root{ --fg-mobile-center-nudge: 36px; }

  /* sel tengah tetap ramping seperti desktop */
  .bereich table tr td:nth-child(2){
    display:block !important;
    text-align:center !important;
    padding:0 !important;                 /* jangan tambah tinggi */
    position:relative !important;
    white-space:nowrap !important;
  }

  /* container judul+tanggal jadi grid 2-baris, center */
  .bereich table tr td:nth-child(2) .story-title-row{
    display:grid !important;
    grid-template-rows:auto auto;
    justify-items:center;
    align-items:center;
    width:100% !important;                /* override width:120% */
    margin:0 auto !important;
    padding:5px 0 5px 0 !important;       /* sama seperti desktop */
    transform:translateX(var(--fg-mobile-center-nudge));
  }

  /* tanggal tidak absolut agar tidak menggeser & auto-hide jika kosong */
  .bereich table tr td:nth-child(2) .story-title-row .story-date{
    position:static !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    line-height:1.1 !important;
    text-align:center !important;
  }
  .bereich table tr td:nth-child(2) .story-title-row .story-date:empty{
    display:none !important;
  }

  /* judul benar-benar center (tanpa dorongan ke kanan) */
  .bereich table tr td:nth-child(2) .story-title-row .story-title{
    margin:0 !important;
    text-align:center !important;
    float:none !important;
  }
}






/* ===============================
   MOBILE: Center header & years
   =============================== */
@media (max-width: 768px) {

  /* Jadikan baris & sel sebagai blok penuh (bukan table-row) */
  .year-navigation-table tr {
    display: block !important;
  }
  .year-navigation-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* "Foto – Geschichten" tepat di tengah & lebih turun */
  .year-navigation-table .judul-navigasi {
    display: block !important;
    text-align: center !important;
    padding-left: 0 !important;         /* override inline 20px */
    margin: 16px auto 10px !important;  /* turun & ada ruang bawah */
  }

  /* Wrapper tahun berada di tengah dan jarak atas–bawah sama */
  .year-toggle-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 10px !important;
    margin: 12px auto -10px !important;  /* simetris */
  }
  .year-toggle-wrapper > div {          /* blok "2011–2015" */
    margin-right: 0 !important;
  }
  .year-toggle-wrapper .years-block {
    padding-left: 0 !important;
  }
  .year-toggle-wrapper .year-link,
  .year-toggle-wrapper .year-period {
    display: inline-block !important;
    margin: 0 10px !important;
  }

  /* Menu: tetap model anak-tangga */
  .top-iframes-table td { text-align: left !important; }
  .top-iframes-table td > a {
    text-indent: 0 !important;
    padding-left: 0 !important;
    display: block;
  }
  .top-iframes-table tr:nth-child(2) td a { padding-left: .75rem !important; }
  .top-iframes-table tr:nth-child(3) td a { padding-left: 1.5rem !important; }
  .top-iframes-table tr:nth-child(4) td a { padding-left: 2.25rem !important; }
  .top-iframes-table tr:nth-child(5) td a { padding-left: 3rem !important; }
  .top-iframes-table tr:nth-child(6) td a { padding-left: 3.75rem !important; }
}

/* ============================
   MOBILE: panah kiri/kanan selalu
   tepat di tengah secara vertikal
   ============================ */
@media (max-width: 768px) {
  /* buang padding manual agar tinggi baris tidak dipengaruhi */
  .accordion-icon-cell-left,
  .accordion-icon-cell-right {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    text-align: center !important;
  }

  /* pusatkan elemen pertama di dalam sel (link/span/font berisi panah) */
  .accordion-icon-cell-left > *:first-child,
  .accordion-icon-cell-right > *:first-child {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;   /* cegah “melar” */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* (opsional) jika ingin kolom panah kiri/kanan benar-benar simetris,
     aktifkan tiga baris di bawah dan sesuaikan angkanya:
  .accordion-icon-cell-left,
  .accordion-icon-cell-right {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
  */
}

/* ============================
   MOBILE: panah kanan menepi
   ============================ */
@media (max-width: 768px) {
  /* pastikan sel kanan relatif tanpa padding ekstra */
  .accordion-icon-cell-right {
    position: relative !important;
    padding: 0 !important;
    text-align: right !important; /* jaga-jaga */
  }

  /* override posisi absolut: bukan center horizontal,
     tapi tempel ke kanan dengan offset kecil */
  .accordion-icon-cell-right > *:first-child {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;          /* geser jarak dari border kanan */
    left: auto !important;          /* batalkan rule sebelumnya */
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

/* ===========================================================
   FG Draggable Splitter (garis merah)
   =========================================================== */
#fg-splitter{
  position:absolute;               /* ditempatkan relatif ke <body> (posisi dihitung via JS) */
  z-index: 2147483640;             /* di atas iframe */
  width: 0;                        /* garis diatur oleh child .fg-bar */
  user-select: none;
}
#fg-splitter .fg-bar{
  position:absolute;
  top:0; bottom:0;
  left:-1.5px;                     /* center 3px on the boundary */
  width:3px;
  background:transparent;
  opacity:0.9;
}
#fg-splitter .fg-hit{
  position:absolute;
  top:0; bottom:0;
  left:-12px;
  width:24px;                      /* area tangkap lebih lebar agar mudah di-drag */
  cursor: col-resize;
  background: transparent;         /* tak terlihat */
}

/* pelindung drag di atas iframe agar event mouse tidak hilang */
#fg-splitter-shield{
  position:absolute;
  z-index: 2147483639;
  background: transparent;
  display:none;
  pointer-events: none;            /* aktifkan saat drag via JS */
}

/* sembunyikan splitter di mobile */
@media (max-width:768px){
  #fg-splitter, #fg-splitter-shield{ display:none !important; }
}

/* opsional: saat drag, nonaktifkan text selection/cursor */
html.fg-splitting, html.fg-splitting *{
  cursor: col-resize !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

/* Desktop: pakai nilai dinamis dari JS (fallback -330px) */
@media (min-width: 769px){
  .top-iframes-table td > a{
    text-indent: var(--fg-menu-indent, -330px) !important;
  }
}

/* Mobile: selalu default -330px */
@media (max-width: 768px){
  .top-iframes-table td > a{
    text-indent: 0px !important;
  }
}