/* ============================================
   UPSIDE DOWN - FORUM STRUKTUR CSS
   Kopiere alles in deine global.css
============================================ */

/* ============================================
   KATEGORIE HEADER
============================================ */

.category-wrapper {
    margin-bottom: 20px;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.category-header::before,
.category-header::after {
    content: '';
    flex: 1;
    height: 1px;
}

.category-header::before {
    background: linear-gradient(90deg, transparent, rgba(143,34,29,0.5));
}

.category-header::after {
    background: linear-gradient(90deg, rgba(143,34,29,0.5), transparent);
}

.category-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #6b7280;
    padding: 0 15px;
}

/* ============================================
   FORUM CONTAINER - DEFAULT (untereinander)
============================================ */

.forum-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================
   FORUM BOX
============================================ */

.forum-box {
    background: #14151C;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    transition: all 0.3s ease;
}

.forum-box:hover {
    border-color: rgba(143,34,29,0.3);
}

/* Border Akzent - Oben Links (horizontal) */
.forum-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 4px;
    background: #8F221D;
    z-index: 2;
}

/* Border Akzent - Oben Links (vertikal) */
.forum-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 24px;
    background: #8F221D;
    z-index: 2;
}

/* ============================================
   FORUM BOX INNER
============================================ */

.forum-box-inner {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

/* Border Akzent - Unten Rechts (horizontal) */
.forum-box-inner::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 4px;
    background: #8F221D;
    z-index: 2;
}

/* Border Akzent - Unten Rechts (vertikal) */
.forum-box-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 4px;
    height: 24px;
    background: #8F221D;
    z-index: 2;
}

/* ============================================
   FORUM ICON
============================================ */

.forum-icon {
    width: 40px;
    height: 40px;
    background: rgba(143,34,29,0.1);
    border: 1px solid rgba(143,34,29,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.forum-icon img {
    width: 24px;
    height: 24px;
}

/* ============================================
   FORUM MAIN (Titel + Beschreibung)
============================================ */

.forum-main {
    flex: 1;
    min-width: 0;
}

.forum-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(180deg, #d4524d 0%, #8F221D 40%, #3d0f0d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.forum-title:hover {
    filter: brightness(1.2);
}

.forum-title-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(143,34,29,0.3), transparent);
}

.forum-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    color: #c0c0c0;
    margin-top: 5px;
    line-height: 1.5;
}

/* ============================================
   FORUM STATS
============================================ */

.forum-stats {
    font-size: 15px;
    color: #c0c0c0;
    white-space: nowrap;
}

.forum-stats span {
    color: #8F221D;
    font-family: 'Bebas Neue', sans-serif;
}

/* ============================================
   LAST POST BOX
============================================ */

/* Lastpost - Avatar rechts */
.lastpost-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-left: 0;
    border-left: none;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    width: 100%;
}

.lastpost-info {
    flex: 1;
    min-width: 0;
}

.lastpost-avatar {
    width: 50px;
    height: 50px;
    background: rgba(143,34,29,0.2);
    border: 1px solid rgba(143,34,29,0.3);
    object-fit: cover;
    flex-shrink: 0;
    order: 2;  /* Avatar nach rechts */
}

/* Forum Box braucht volle Höhe */
.category-1 .forum-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.category-1 .forum-box-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 220px;
    height: 100%;
}

/* Lastpost immer nach unten */
.category-1 .lastpost-box {
    margin-top: auto;
}

.lastpost-user,
.lastpost-user a {
    font-size: 12px;
    color: #d4524d;
    text-decoration: none;
    display: inline-block;
}

.lastpost-user a:hover {
    color: #f87171;
}

.lastpost-date {
    font-size: 11px;
    color: #c0c0c0;
}

.lastpost-subject {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    color: #e5e5e5;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.lastpost-subject a {
    color: #e5e5e5;
    text-decoration: none;
}

.lastpost-subject a:hover {
    color: #d4524d;
}

/* ============================================
   KATEGORIE 1: INFORMATION (3-spaltig)
============================================ */

.category-1 .forum-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.category-1 .forum-box-inner {
    flex-direction: column;
    align-items: flex-start;
}

/* Icon + Titel nebeneinander */
.category-1 .forum-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 10px;
}

.category-1 .forum-icon {
    width: 50px;
    height: 50px;
}

.category-1 .forum-main {
    width: 100%;
}

.category-1 .forum-title {
    font-size: 25px;  /* Größer */
}

.category-1 .forum-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-1 .forum-title-line {
    flex: 1;
}

.category-1 .forum-stats {
    margin-top: 10px;
}

.category-1 .lastpost-box {
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.05);
	height:20%;
}

.category-1 .forum-stats {
    margin-top: auto;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    padding-top: 15px;
}

/* ============================================
   ANDERE KATEGORIEN (untereinander)
   ÄNDERE die IDs zu deinen echten IDs!
============================================ */

.category-2 .forum-container,
.category-3 .forum-container,
.category-4 .forum-container,
.category-5 .forum-container,
.category-6 .forum-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 1200px) {
    .category-1 .forum-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .category-1 .forum-container {
        grid-template-columns: 1fr;
    }
    
    .forum-box-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .forum-stats {
        margin-top: 10px;
    }
    
    .lastpost-box {
        width: 100%;
        border-left: none;
        padding-left: 0;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
}

/* ============================================
   BEWERBUNGEN, KATEGORIE 17 & 18 - Volle Breite, Sidebar Style
============================================ */

.category-8 .forum-container,
.category-17 .forum-container,
.category-18 .forum-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-8 .forum-box,
.category-17 .forum-box,
.category-18 .forum-box {
    display: flex;
    background: #14151C;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    transition: all 0.3s ease;
}

.category-8 .forum-box:hover,
.category-17 .forum-box:hover,
.category-18 .forum-box:hover {
    border-color: rgba(143,34,29,0.3);
}

/* Ecke oben-links horizontal */
.category-8 .forum-box::before,
.category-17 .forum-box::before,
.category-18 .forum-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 4px;
    background: #8F221D;
    z-index: 5;
}

/* Ecke oben-links vertikal */
.category-8 .forum-box::after,
.category-17 .forum-box::after,
.category-18 .forum-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 24px;
    background: #8F221D;
    z-index: 5;
}

/* Inner Container */
.category-8 .forum-box-inner,
.category-17 .forum-box-inner,
.category-18 .forum-box-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    padding-left: 24px;
    position: relative;
}

/* Sidebar Linie */
.category-8 .forum-box-inner::before,
.category-17 .forum-box-inner::before,
.category-18 .forum-box-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 0;
    width: 4px;
    background: none;
    z-index: 1;
}

/* Keine mittlere Ecke */
.category-8 .forum-box-inner::after,
.category-17 .forum-box-inner::after,
.category-18 .forum-box-inner::after {
    display: none;
}

/* Header: Icon + Titel */
.category-8 .forum-header,
.category-17 .forum-header,
.category-18 .forum-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
}

.category-8 .forum-icon,
.category-17 .forum-icon,
.category-18 .forum-icon {
    display: flex;
    width: 40px;
    height: 40px;
}

.category-8 .forum-title-row,
.category-17 .forum-title-row,
.category-18 .forum-title-row {
    flex: 1;
    justify-content: flex-start;
}

.category-8 .forum-title,
.category-17 .forum-title,
.category-18 .forum-title {
    font-size: 18px;
}

.category-8 .forum-title-line,
.category-17 .forum-title-line,
.category-18 .forum-title-line {
    display: none;
}

/* Stats rechts oben */
.category-8 .forum-stats,
.category-17 .forum-stats,
.category-18 .forum-stats {
    position: absolute;
    top: 16px;
    right: 16px;
    text-align: right;
}

/* Beschreibung anzeigen */
.category-8 .forum-desc,
.category-17 .forum-desc,
.category-18 .forum-desc {
    display: block;
    margin-top: 5px;
}

/* Lastpost unten mit Ecke */
.category-8 .lastpost-box,
.category-17 .lastpost-box,
.category-18 .lastpost-box {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-left: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.category-8 .lastpost-box::before,
.category-17 .lastpost-box::before,
.category-18 .lastpost-box::before {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 24px;
    height: 4px;
    background: #8F221D;
    z-index: 5;
}

.category-8 .lastpost-box::after,
.category-17 .lastpost-box::after,
.category-18 .lastpost-box::after {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 4px;
    height: 24px;
    background: #8F221D;
    z-index: 5;
}

.category-8 .lastpost-info,
.category-17 .lastpost-info,
.category-18 .lastpost-info {
    flex: 1;
}

.category-8 .lastpost-subject,
.category-17 .lastpost-subject,
.category-18 .lastpost-subject {
    margin-bottom: 4px;
}

.category-8 .lastpost-user,
.category-8 .lastpost-date,
.category-17 .lastpost-user,
.category-17 .lastpost-date,
.category-18 .lastpost-user,
.category-18 .lastpost-date {
    display: inline;
}

.category-8 .lastpost-user::before,
.category-17 .lastpost-user::before,
.category-18 .lastpost-user::before {
    content: 'von ';
    color: #6b7280;
}

.category-8 .lastpost-date::before,
.category-17 .lastpost-date::before,
.category-18 .lastpost-date::before {
    content: ' · ';
    color: #6b7280;
}

.category-8 .lastpost-avatar,
.category-17 .lastpost-avatar,
.category-18 .lastpost-avatar {
    width: 50px;
    height: 50px;
    margin-left: auto;
}

/* ============================================
   INPLAY (Kategorie 10) - Bild Links via Pseudo
============================================ */

.category-10 .forum-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-10 .forum-box {
    display: flex;
    background: #14151C;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    min-height: 140px;
}

.category-10 .forum-box:hover {
    border-color: rgba(143,34,29,0.3);
}

/* Bild links - Schwarz-Weiß */
.category-10 .forum-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: rgba(143,34,29,0.1);
    z-index: 1;
  filter: grayscale(100%) brightness(0.5) contrast(1.2);
}

/* Gradient Overlay auf dem Bild */
.category-10 .forum-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
     background: 
       linear-gradient(to right, transparent 0%, rgba(0,0,0,0.95) 100%),
        rgba(143,34,29,0.15);
    z-index: 2;
}

/* Ecken auf eigenem Element */
.category-10 .forum-box-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 4px;
    background: #8F221D;
    z-index: 10;
}

.category-10 .forum-box-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 24px;
    background: #8F221D;
    z-index: 10;
}

/* Inner Container - nach rechts verschieben */
.category-10 .forum-box-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    padding-left: calc(33% + 20px);
    position: relative;
    min-height: 140px;
}

/* Sidebar Linie */
.category-10 .forum-header::before {
    content: '';
    position: absolute;
    left: 33%;
    top: 24px;
    bottom: 0;
    width: 4px;
    background: rgba(143,34,29,0.3);
    z-index: 3;
}

/* Header */
.category-10 .forum-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    position: static;
}

/* Icon verstecken */
.category-10 .forum-icon {
    display: none;
}

.category-10 .forum-title-row {
    flex: 1;
}

.category-10 .forum-title {
    font-size: 18px;
}

.category-10 .forum-title-line {
    display: none;
}

/* Stats rechts */
.category-10 .forum-stats {
    position: absolute;
    top: 16px;
    right: 16px;
    text-align: right;
}

/* Beschreibung */
.category-10 .forum-desc {
    display: block;
    margin-top: 5px;
}

/* Lastpost */
.category-10 .lastpost-box {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-left: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Ecke unten rechts */
.category-10 .lastpost-box::before {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 24px;
    height: 4px;
    background: #8F221D;
    z-index: 10;
}

.category-10 .lastpost-box::after {
    content: '';
    position: absolute;
    bottom: -16px;
    right: -16px;
    width: 4px;
    height: 24px;
    background: #8F221D;
    z-index: 10;
}

.category-10 .lastpost-info {
    flex: 1;
}

.category-10 .lastpost-subject {
    margin-bottom: 4px;
}

.category-10 .lastpost-user,
.category-10 .lastpost-date {
    display: inline;
}

.category-10 .lastpost-user::before {
    content: 'von ';
    color: #6b7280;
}

.category-10 .lastpost-date::before {
    content: ' · ';
    color: #6b7280;
}

.category-10 .lastpost-avatar {
    width: 50px;
    height: 50px;
    margin-left: auto;
}

/* ============================================
   BILDER PRO FORUM - Ändere die IDs!
============================================ */

#forum_11::before {
    background-image: url(../../../images/upsidedown/iphawkins.webp);
}

#forum_12::before {
    background-image: url(../../../images/upsidedown/iptown.webp);
}

#forum_13::before {
    background-image: url(../../../images/upsidedown/iplab.webp);
	filter: grayscale(100%) brightness(0.7) contrast(1.2);
}

#forum_14::before {
    background-image: url(../../../images/upsidedown/ipoutside.webp);
	filter: grayscale(100%) brightness(0.7) contrast(1.2);
}

#forum_15::before {
    background-image: url(../../../images/upsidedown/ipupside.webp);
	filter: grayscale(100%) brightness(1.5) contrast(1.2);
}

#forum_16::before {
    background-image: url(../../../images/upsidedown/ipnebenplay.webp);
	filter: grayscale(100%) brightness(0.9) contrast(1.2);
}