/* =========================
   RESPONSIVE OVERRIDES
   PC/Laptop/Tablet/Handy
   ========================= */
body{
  padding-top: 70px;
}

/* -------------------------
   LAPTOP (<= 1366px)
   ------------------------- */
@media (max-width: 1366px){

  .flyingguardians-menu{
    padding: 5px 24px;
    gap: 18px;
    height: 64px;
  }

  .nav-user-icons,
  .nav-main-icons,
  #scrollMenuIcons{
    gap: 14px;
  }

  .nav-icon{
    width: 52px;
    height: 52px;
  }

  .nav-user-icons a,
  #mainTopMenu a,
  #mainTopMenu span{
    font-size: 13px;
  }

  .nav-user-icons i,
  .menu-icon-with-label i,
  .fg-header_menu-item i{
    font-size: 18px;
  }

  .fgindexbox{
    width: min(var(--board-size), 100%);
  }
}


/* -------------------------
   TABLET (<= 1024px)
   Fokus: Platz sparen, Labels ausblenden
   ------------------------- */
@media (max-width: 1024px){

  .flyingguardians-menu{
    padding: 5px 16px;
    gap: 14px;
    height: 60px;
  }

  .nav-user-icons{
    flex: 1;
    min-width: 0;
  }

  .nav-user-icons,
  .nav-main-icons,
  #scrollMenuIcons{
    gap: 12px;
  }

  .nav-icon{
    width: 48px;
    height: 48px;
  }

  .nav-user-icons .icon-label,
  .menu-icon-with-label .icon-label{
    display: none;
  }

  .nav-user-icons a{
    gap: 0;
  }

  .nav-user-icons i,
  .menu-icon-with-label i{
    font-size: 20px;
  }

  .fg-header_menu{
    flex-wrap: wrap;
    gap: 14px;
  }

  .fgindexbox{
    width: 100%;
    grid-template-columns: 50% 50%;
    height: auto;          
  }

  .fgindex-content{
    height: 180px;           
  }
}


/* -------------------------
   HANDY (<= 600px)
   Fokus: fixed menu kompakt + horizontales scrollen statt Layoutbruch
   ------------------------- */
@media (max-width: 600px){

  body{
    padding-top: 58px; 
  }

  .flyingguardians-menu{
    height: 56px;
    padding: 5px 10px;
    gap: 10px;
  }


  .nav-user-icons,
  .nav-main-icons,
  #scrollMenuIcons,
  .scrollMenuIcons{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
  }

  .nav-user-icons::-webkit-scrollbar,
  .nav-main-icons::-webkit-scrollbar,
  #scrollMenuIcons::-webkit-scrollbar,
  .scrollMenuIcons::-webkit-scrollbar{
    display: none; 
  }

  .nav-user-icons,
  .nav-main-icons,
  #scrollMenuIcons{
    gap: 10px;
  }

  .nav-icon{
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }

  .nav-user-icons a{
    flex: 0 0 auto;
  }

  .nav-user-icons .icon-label,
  .menu-icon-with-label .icon-label{
    display: none;
  }

  [data-title]:after{
    display: none;
  }

  .fg-header_menu{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 12px;
    padding-bottom: 8px;
  }

  .fg-header_menu::-webkit-scrollbar{ display:none; }
  .fg-header_menu{ scrollbar-width:none; }

  .fgindexbox{
    width: 100%;
    grid-template-columns: 100%;
    height: auto;
  }

  .fgindex-title{
    padding: 10px 12px;
  }

  .fgindex-content{
    height: auto;    
    max-height: 260px;
  }
}


@media screen and (max-width: 900px){
    .fg-events{
        flex-direction: column;
    }

    .fg-events-info{
        width: 100%;
    }

    .fg-events-row{
        height: auto;
        flex-direction: column;
    }

    .fg-events-last{
        flex: 1;
    }
}

@media screen and (max-width: 900px) {
    .forumgrid[class*="forum-fid"] > .fg-container4 {
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 900px) {
    .forumgrid[class*="forum-fid"] > .flyingguardian-container {
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 900px) {
    .forumgrid[class*="forum-fid"] > .flyingguardian-container2 {
        flex: 1 1 100%;
    }
}

@media (max-width: 1100px) {
    .forumgrid[class*="forum-fid"] > .fg2k-container {
        flex: 1 1 100%;
    }

    .fg2k-container {
        width: 100%;
    }
}

/* Mobile: Stack (Status oben, Content unten) */
@media (max-width: 700px) {
    .fg2k-container {
        height: auto;              /* nicht mehr fix */
    }

    .fg2k-inner {
        flex-direction: column;    /* stack */
        height: auto;
    }

    /* Status wird oben vollbreit, behält Höhe 230 */
    .fg2k-status {
        width: 100%;
        flex: 0 0 auto;
        height: 230px;             /* Höhe bleibt */
    }

    .fg2k-status > .forum_status {
        width: 100%;
        height: 230px;
        background-size: cover;
    }

    /* Body wird automatisch so hoch wie Inhalt */
    .fg2k-body {
        height: auto;
        padding: 14px 16px 16px;
    }

    /* Auf kleinen Screens dürfen Stats umbrechen, wenn’s eng wird */
    .fg2k-stats {
        white-space: normal;
    }
}

/* Sehr schmal: Typo etwas kleiner */
@media (max-width: 420px) {
    .fg2k-title { font-size: 16px; }
    .fg2k-desc { -webkit-line-clamp: 4; } /* etwas mehr Luft */
}


@media (max-width: 1100px){
	.ipk-bits{
		flex: 1 1 calc(50% - 12px);
	}
}

/* Mobile: 1 pro Reihe */
@media (max-width: 600px){
	.ipk-bits{
		flex: 1 1 100%;
	}
}


@media (max-width: 1100px){
    .ba-overview--cols3 .ba-overview_grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px){
    .ba-overview--cols2 .ba-overview_grid,
    .ba-overview--cols3 .ba-overview_grid{ grid-template-columns: 1fr; }

    .ba-overview__row{
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Responsive */
@media (max-width: 1100px){
	.fg-footer{ width: 100%; padding: 0 10px; }
	.fg-footer-row--2{ grid-template-columns: 1fr; }
	.fg-footer-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fg-footer-extended-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
	.fg-footer-extended-grid{ grid-template-columns: 1fr; }
	.fg-footer-stats{ grid-template-columns: 1fr; }
	.fg-footer-welcome{ font-size: 26px; }
}

@media (max-width: 900px) {
    #footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer-right {
        text-align: center;
    }
}


/* Responsive */
@media (max-width: 900px) {
    .pt-wrap {
        flex-direction: column;
    }

    .pt-nav {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    .pt-desc {
        width: 100%;
    }

    .pt-thread-cast {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .lexicon-wrapper {
        flex-direction: column;
    }

    .lexicon-menu {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 700px){
    .fg-forumdisplay-actions{
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .fg-forumdisplay-newthread{
        justify-content: flex-end;
    }
}

@media (max-width: 900px){
    .fg-forumdisplay-thread{
        flex-direction: column;
    }

    .fg-forumdisplay-thread-lastpost{
        flex: 0 0 auto;
        text-align: left;
    }

    .fg-forumdisplay-thread-status{
        width: 100px;
    }
}