/* ==========================================================================
   STYLING FÜR FORUM (OHNE BOOTSTRAP)
   ========================================================================== */

/* 1. Hauptcontainer */
.tx-forum {
    font-family: Verdana, sans-serif;
    line-height: 1.5;
}

/* 2. Suchbereich (ehemals 'card') */
.forum-filter {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 30px;
}

.forum-filter .card-title {
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    color: #555;
}

/* 3. Eingabefelder (orientiert an deiner form.css) */
.tx-forum input[type="text"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 4. Deine Buttons (angepasst an dein Design) */
.tx-forum .btn {
    display: inline-block;
    padding: 12px 20px;
    background-color: #d5810e;
    color: #ffffff;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 10px; /* Gegen das Aneinanderkleben */
}

.tx-forum .btn:hover {
    background-color: #b06b0b;
    box-shadow: 0 4px 12px rgba(213, 129, 14, 0.3);
}

/* Speziell für "zurücksetzen" (falls du hier eine andere Farbe willst) */
.tx-forum .btn-danger {
    background-color: #666;
}

/* 5. Tabellen-Styling */
.tx-forum table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 25px; /* Abstand nach unten für sauberen Abschluss */
    border: 1px solid #e0e0e0;
}

.tx-forum th, .tx-forum td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.tx-forum thead {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Zeilen-Hover-Effekt */
.tx-forum table tr:hover {
    background-color: #fcfcfc;
}

/* 6. Badges (Schlagworte) */
.tx-forum .badge {
    background-color: #d5810e;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ==========================================================================
   OPTIMIERUNG DETAILANSICHT FORUM
   ========================================================================== */

/* Abstand zwischen den Buttons oben (Bearbeiten/Löschen/Zurück) */
.tx-forum .btn {
    display: inline-block;
    
    /* Hier die fixen Maße einstellen */
    width: 180px;      /* Feste Breite */
    height: 45px;      /* Feste Höhe */
    
    /* Zentrierung des Inhalts */
    line-height: 45px; /* Muss der Höhe entsprechen, um vertikal zu zentrieren */
    text-align: center;
    padding: 0;        /* Padding entfernen, da wir nun mit fester Größe arbeiten */
    
    /* Restliches Design */
    background-color: #d5810e;
    color: #ffffff;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Verhindert Layout-Fehler */
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap; /* Verhindert, dass Text umbricht */
    text-overflow: ellipsis; /* Fügt ... hinzu, falls Text zu lang ist */
}

.tx-forum .btn:hover {
    background-color: #b06b0b;
}

/* Speziell für den Löschen-Button (Grau statt Orange) */
.tx-forum .btn-delete {
    background-color: #666;
}

/* Bereich für Schlagworte */
.tx-forum .badge {
    display: inline-block;
    background-color: #eee;
    padding: 4px 10px;
    margin-right: 5px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
    margin-bottom: 25px;
}

/* Antwort-Textarea und Formular */
.tx-forum textarea {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* Wichtig, damit es nicht über den Rand ragt */
    font-family: Verdana, sans-serif;
}

/* Button "Speichern" - volle Breite wie in deinen anderen Formularen */
.tx-forum input[type="submit"][name*="save"], 
.tx-forum button[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #d5810e;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* ==========================================================================
   FORUM KARTEN-DESIGN (Beiträge & Antworten)
   ========================================================================== */

/* Basis-Styling für alle Forum-Boxen */
.tx-forum .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    padding: 20px;
    margin-bottom: 25px;
    transition: all 0.3s ease; /* Sanfter Übergang für den Hover */
}

/* Hover-Effekt für die Boxen */
.tx-forum .card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: #d5810e; /* Akzentfarbe beim Hover */
    transform: translateY(-2px);
}

/* Überschrift innerhalb der Karte */
.tx-forum .card-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.tx-forum h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

/* Styling für die Antwort-Boxen (separat ansteuerbar) */
.tx-forum .forum-response {
    background-color: #fcfcfc; /* Etwas heller als der Hauptbeitrag */
    border-left: 5px solid #d5810e; /* Optische Kennzeichnung der Antwort */
}

/* Fix für die Buttons in den Boxen */
.tx-forum .btn {
    width: 200px;       /* Deine gewünschte fixe Größe */
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    background-color: #d5810e;
    color: #ffffff;
    display: inline-block;
}

.tx-forum .btn-danger {
    background-color: #666; /* Löschen-Button grau */
}

.tx-forum .btn-outline-primary {
    background-color: transparent;
    border: 2px solid #d5810e;
    color: #d5810e;
}

/* ==========================================================================
   TEXT-HERVORHEBUNG IN FORUM-BEITRÄGEN
   ========================================================================== */

/* 1. Bereich, der den Text enthält (innerhalb der card) */
.tx-forum .card-body p {
    background-color: #fcfcfc;    /* Ganz dezenter Hintergrund */
    padding: 15px;               /* Mehr Luft um den Text */
    border-radius: 6px;          /* Passend zu deinen anderen Ecken */
    border-left: 3px solid #d5810e; /* Ein farbiger Strich links für den Fokus */
    font-size: 1.05rem;          /* Text minimal größer für bessere Lesbarkeit */
    line-height: 1.6;            /* Mehr Zeilenabstand */
    color: #444;                 /* Etwas dunkleres Grau für besseren Kontrast */
}

/* 2. Spezielle Hervorhebung für die Antwort-Boxen */
.tx-forum .forum-response .card-body p {
    background-color: #fdfdfd;    /* Minimal andere Farbe für Antworten */
    border-left-color: #999;     /* Grauer Strich für Antworten statt Orange */
}

/* 3. Text der Frage/Antwort "fett" oder farblich abheben */
.tx-forum .card-text {
    font-weight: 500;            /* Leichte Schrift-Stärke für bessere Präsenz */
}

/* ==========================================================================
   TITEL-ANPASSUNG IN DER FORUM-LISTE
   ========================================================================== */

/* Ziel: Den Link innerhalb der Tabellenzelle (Titelspalte) vergrößern */
.tx-forum table td p a {
    font-size: 1.25rem;       /* Etwas größer als der Standardtext */
    font-weight: bold;        /* Mehr Präsenz für den Titel */
    color: #d5810e;           /* Dunkles Grau statt Standard-Orange für bessere Lesbarkeit */
    text-decoration: none;    /* Unterstreichung entfernen */
}

/* Optional: Ein leichter Hover-Effekt für den Titel in der Liste */
.tx-forum table td p a:hover {
    color: #d5810e;           /* Farbe wechselt auf dein Orange beim Überfahren */
    text-decoration: underline;
}

/* Teaser in der Liste sichtbar machen */
.tx-forum table td .teaser-text {
    display: block;        /* Macht den Text sichtbar */
    font-size: 0.9rem;      /* Etwas kleiner als der Titel */
    color: #666;           /* Dezentes Grau */
    margin-top: 5px;       /* Abstand zum Titel */
    max-width: 400px;      /* Begrenzt die Breite */
    overflow: hidden;      /* Schneidet zu langen Text ab */
    white-space: nowrap;   /* Verhindert Zeilenumbruch */
    text-overflow: ellipsis; /* Fügt ... hinzu */
}

@media (max-width: 768px) {
    /* Container für die Tabelle, um horizontalen Überlauf zu verhindern */
    .tx-forum {
        width: 100%;
        max-width: 100vw; /* Verhindert, dass das Element breiter als der Bildschirm wird */
        box-sizing: border-box;
        padding-left: 15px; /* Links die Lücke ausgleichen */
        padding-right: 15px; /* Rechts die Lücke ausgleichen */
    }

    /* Tabellen-Anpassung */
    .tx-forum table {
        width: 100%;
        table-layout: fixed; /* Zwingt die Tabelle, innerhalb ihrer Breite zu bleiben */
        border-collapse: collapse;
    }

    .tx-forum td, .tx-forum th {
        word-wrap: break-word; /* Bricht lange Wörter um, statt Layout zu sprengen */
        overflow-wrap: break-word;
        padding: 10px;
    }
}

@media (max-width: 600px) {
    /* Verstecke die Tabellenüberschriften */
    .tx-forum thead {
        display: none;
    }

    /* Jede Zeile wird zu einem eigenen Block (Karte) */
    .tx-forum tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 10px;
    }

    /* Jede Zelle wird zu einer eigenen Zeile innerhalb der Karte */
    .tx-forum td {
        display: block;
        text-align: left;
        border-bottom: none;
        padding: 5px 0;
    }

    /* Labels für die mobile Ansicht einfügen (optional, aber hilfreich) */
    .tx-forum td:before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #555;
    }
}