/**
 * T26 Core Theme - WBCE CMS
 * @author      Thodde26 (Thorsten)
 * @Version     1.0.0
 * @link        https://www.thodde26.de
 * @file        css/components.css
 * @license     http://www.gnu.org/licenses/gpl.html GNU General Public License v3.0
 */

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.t26-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--t26-border-color, #cbd5e1);
    border-radius: 4px;
    background-color: var(--t26-bg-surface, #ffffff);
    color: var(--t26-text-main, #0f172a);
    cursor: pointer;
    transition: all 0.2s ease;
}

.t26-btn:hover {
    background-color: var(--t26-bg-lighter, #f8fafc);
}

.t26-btn--primary {
    background-color: var(--t26-primary-base, #0f2a4a);
    border-color: var(--t26-primary-base, #0f2a4a);
    color: var(--t26-text-invert, #ffffff);
}

.t26-btn--primary:hover {
    background-color: var(--t26-primary-hover, #12335a);
}

.t26-btn--danger {
    background-color: var(--t26-danger-bg, #dc2626);
    border-color: var(--t26-danger-border, #b91c1c);
    color: var(--t26-text-invert, #ffffff);
}

/* ==========================================================================
   2. ALERTS (Systemmeldungen)
   ========================================================================== */
.t26-alert-success,
.t26-alert-info,
.t26-alert-danger {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left: 4px solid;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.t26-alert-success {
    background-color: var(--t26-success-bg, #d1e7dd);
    color: var(--t26-success-text, #0f5132);
    border-color: var(--t26-success-border, #badbcc);
}

.t26-alert-info {
    background-color: var(--t26-info-bg, #cce7f0);
    color: var(--t26-info-text, #135e77);
    border-color: var(--t26-info-border, #135e77);
}

.t26-alert-danger {
    background-color: var(--t26-danger-bg, #f8d7da);
    color: var(--t26-danger-text, #842029);
    border-color: var(--t26-danger-border, #f5c2c7);
}

/* ==========================================================================
   3. FORMULARE (Inputs, Textareas)
   ========================================================================== */
.t26-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--t26-text-main, #0f172a);
}

.t26-input,
.t26-textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--t26-input-border, #94a3b8);
    border-radius: 4px;
    background-color: var(--t26-input-bg, #ffffff);
    color: var(--t26-input-color, #0f172a);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.t26-textarea {
    resize: vertical;
    min-height: 120px;
}

.t26-input:focus,
.t26-textarea:focus {
    outline: none;
    border-color: var(--t26-input-focus, #378add);
    box-shadow: 0 0 0 3px var(--t26-focus-shadow, rgba(55, 138, 221, 0.2));
}

/* ==========================================================================
   4. T26 KARTEN & BOXEN (Feature-Cards, Donuts)
   ========================================================================== */
.t26-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.t26-card {
    background-color: var(--t26-bg-surface, #ffffff);
    border: 1px solid var(--t26-border-color, #cbd5e1);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 15px var(--t26-shadow-color, rgba(10, 17, 40, 0.05));
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.t26-card:hover {
    transform: translateY(-10px);
    border-color: var(--t26-primary-base, #0f2a4a);
    box-shadow: 0 15px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.15));
}

/* ==========================================================================
   5. T26 SEKTIONEN (Zebra-Look & Basis-Struktur)
   ========================================================================== */
.t26-page-section {
    padding: 80px 0;
    border-bottom: 1px solid var(--t26-border-color, #cbd5e1);
    min-height: 60vh;
}

.t26-page-section:nth-child(odd) {
    background-color: var(--t26-bg-body, #f4f7f9);
}

.t26-page-section:nth-child(even) {
    background-color: var(--t26-bg-surface, #ffffff);
}

/* ==========================================================================
   6. T26 AURORA GLOW EFFEKT (Hero / Highlight-Box)
   ========================================================================== */
.t26-aurora-box {
    background: linear-gradient(
        135deg,
        var(--t26-bg-surface, #ffffff) 0%,
        var(--t26-primary-base, #0f2a4a) 50%,
        var(--t26-accent-color, #378ADD) 100%
    );
    background-size: 200% 200%;
    animation: t26-auroraGlow 12s ease infinite;
    padding: 60px 30px;
    border-radius: 15px;
    margin-bottom: 40px;
    border: 1px solid var(--t26-border-color, #cbd5e1);
    box-shadow: 0 4px 15px var(--t26-shadow-color, rgba(10, 17, 40, 0.1));
    overflow: hidden;
    color: var(--t26-text-invert, #ffffff);
}

@keyframes t26-auroraGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   6.1 T26 HERO SEKTION (Startseiten-Banner mit Tech-Hintergrund)
   ========================================================================== */

.t26-hero-section {
    /* T26 Full-Width Trick: Bricht aus dem max-width Container aus */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -40px; /* <-- FIX: Zieht die Sektion über das Standard-Padding des main-content */

    /* Hintergrundbild dynamisch aus dem Media-Ordner laden */
    background-image: url('../../../media/t26_core_admintool/about_bg_code.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #050a15; /* Dunkler Fallback */

    padding: 100px 20px;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--t26-border-color, #cbd5e1);
}

/* Die animierte Aurora-Karte im Zentrum - SMOOTH & FINE */
.t26-hero-card {
    /* Feinerer T26 Aurora Glow mit fließenden Zwischenstufen */
    background: linear-gradient(
        120deg,
        var(--t26-bg-surface, #ffffff) 0%,
        var(--t26-highlight-bg, #85B7EB) 25%,
        var(--t26-accent-color, #378ADD) 50%,
        var(--t26-secondary-base, #185FA5) 75%,
        var(--t26-primary-base, #0f2a4a) 100%
    );
    /* Der Trick für extreme Weichheit: Verlauf um das Vierfache strecken */
    background-size: 400% 400%;
    /* Etwas verlangsamt für eine ruhige, edle Dynamik */
    animation: t26-auroraGlow 15s ease-in-out infinite;

    border-radius: 12px;
    padding: 60px 40px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--t26-text-invert, #ffffff);
}

/* Der fette, zentrierte Titel */
.t26-hero-title {
    color: var(--t26-text-invert, #ffffff); /* Schrift nun zwingend in Weiß */
    font-size: 2.8rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 1px;
    font-family: var(--t26-font-family);
    display: inline-block;

    /* Rahmen und Textschatten für perfekte Lesbarkeit auf dem bewegten Aurora-Hintergrund */
    border-bottom: 3px solid var(--t26-highlight, #85B7EB);
    padding-bottom: 10px;
    text-shadow: 0 2px 5px rgba(10, 17, 40, 0.4);
}

/* Responsive: Noch größer auf Desktop-Monitoren */
@media (min-width: 768px) {
    .t26-hero-title {
        font-size: 3.5rem;
    }
}

/* Der zentrierte Subtext */
.t26-hero-text {
    color: var(--t26-text-invert, #ffffff);
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 auto 30px auto;
    max-width: 750px;
    text-shadow: 0 1px 3px rgba(10, 17, 40, 0.4); /* Sichert die Lesbarkeit */
}

/* Der zentrierte Button-Wrapper */
.t26-hero-action {
    text-align: center;
    margin-top: 20px;
}
/* ==========================================================================
   7. T26 AKKORDEON
   ========================================================================== */
.t26-accordion-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
}

.t26-accordion-item {
    margin-bottom: 10px;
}

.t26-accordion-btn {
    width: 100%;
    text-align: left;
    background-color: var(--t26-bg-surface, #ffffff);
    color: var(--t26-text-main, #0f172a);
    border: 1px solid var(--t26-border-color, #cbd5e1);
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-family: var(--t26-font-family);
}

.t26-accordion-btn:hover,
.t26-accordion-btn.is-active {
    background-color: var(--t26-bg-lighter, #f8fafc);
    border-color: var(--t26-accent-color, #378ADD);
    color: var(--t26-accent-color, #378ADD);
}

.t26-accordion-content {
    max-height: 0;
    overflow: hidden;
    background-color: var(--t26-bg-surface, #ffffff);
    border-left: 2px solid var(--t26-accent-color, #378ADD);
    border-right: 1px solid var(--t26-border-color, #cbd5e1);
    border-bottom: 1px solid var(--t26-border-color, #cbd5e1);
    border-radius: 0 0 8px 8px;
    margin-top: -5px;
    padding: 0 20px;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.t26-accordion-content.is-open {
    padding: 15px 20px;
}

/* Abstände innerhalb des Inhalts für saubere Typografie */
.t26-accordion-content p {
    margin-top: 15px;
    margin-bottom: 15px;
}

.t26-accordion-content p:last-child {
    margin-bottom: 0;
}
/* ==========================================================================
   8. T26 ÜBER MICH SEKTION (ABOUT)
   ========================================================================== */
.t26-about-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    text-align: left;
}

.t26-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 992px) {
    .t26-about-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.t26-about-title {
    color: var(--t26-accent-color, #378ADD);
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    font-family: var(--t26-font-family);
}

.t26-about-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 2px;
    background-color: var(--t26-border-color, #cbd5e1);
}

.t26-about-text p {
    margin-bottom: 20px;
    color: var(--t26-text-muted, #475569);
    font-size: 1.05rem;
    line-height: 1.7;
}

.t26-about-text p:last-child {
    margin-bottom: 0;
}

.t26-about-text strong {
    color: var(--t26-text-main, #0f172a);
}

.t26-about-image-wrapper {
    display: flex;
    justify-content: center;
}

.t26-profile-img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 5px solid var(--t26-bg-surface, #ffffff);
    outline: 2px solid var(--t26-accent-color, #378ADD);
    box-shadow: 0 8px 20px var(--t26-shadow-color, rgba(10, 17, 40, 0.1));
    transition: transform 0.3s ease;
}

.t26-profile-img:hover {
    transform: scale(1.03);
}

/* ==========================================================================
   9. T26 SOCIAL MEDIA & KONTAKT SEKTION
   ========================================================================== */
.t26-social-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: left;
}

.t26-social-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.t26-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background-color: var(--t26-bg-lighter, #f8fafc);
    color: var(--t26-primary-base, #0f2a4a);
    border: 1px solid var(--t26-border-color, #cbd5e1);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.t26-social-btn:hover {
    background-color: var(--t26-accent-color, #378ADD);
    color: var(--t26-text-invert, #ffffff);
    border-color: var(--t26-accent-color, #378ADD);
    transform: translateY(-4px);
    box-shadow: 0 8px 15px var(--t26-shadow-color, rgba(55, 138, 221, 0.25));
}

.t26-social-droplets {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--t26-border-color, #cbd5e1);
}


/* ==========================================================================
   11. T26 STREAMING SEKTION
   ========================================================================== */
.t26-stream-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: left;
}

.t26-stream-subtitle {
    color: var(--t26-text-main, #0f172a);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: -15px; /* Zieht den Untertitel etwas näher an die Hauptüberschrift */
    margin-bottom: 25px;
}

.t26-stream-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

/* Brand Buttons (bauen auf der Basis .t26-btn auf) */
.t26-btn-brand--twitch {
    background-color: #6441a5; /* Twitch Lila */
    border-color: #6441a5;
    color: #ffffff;
}
.t26-btn-brand--twitch:hover {
    background-color: #503484;
    border-color: #503484;
    color: #ffffff;
}

.t26-btn-brand--tiktok {
    background-color: #000000; /* TikTok Schwarz */
    border-color: #000000;
    color: #ffffff;
}
.t26-btn-brand--tiktok:hover {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
}

.t26-btn-brand--youtube {
    background-color: #ff0000; /* YouTube Rot */
    border-color: #ff0000;
    color: #ffffff;
}
.t26-btn-brand--youtube:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}

/* ==========================================================================
   12. T26 PROJEKTE SEKTION
   ========================================================================== */
.t26-projects-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px; /* Hier ist der fehlende Abstand! */
    text-align: left; /* Erzwingt die linksbündige Ausrichtung */
}

/* ==========================================================================
   13. T26 HOMEPAGES & DONUT CHARTS
   ========================================================================== */
.t26-homepages-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: left;
}

.t26-donut-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 992px) {
    .t26-donut-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf Desktop */
    }
}

.t26-donut-item {
    background-color: var(--t26-bg-lighter, #f8fafc);
    border: 1px solid var(--t26-border-color, #cbd5e1);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Das Donut-Diagramm - T26 Style mit dynamischem Rot-Grün-Verlauf */
/* Das Donut-Diagramm - T26 Status-Farbe (Clean & Solid) */
.t26-donut-chart {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /* Zieht sich Farbe und Prozentwert vollautomatisch aus dem HTML! */
    background: conic-gradient(
        var(--t26-donut-color) var(--t26-donut-value),
        var(--t26-border-color, #cbd5e1) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px var(--t26-shadow-color, rgba(10, 17, 40, 0.1));
}

.t26-donut-inner {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: var(--t26-bg-surface, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--t26-primary-base, #0f2a4a);
    font-family: var(--t26-font-family);
}

.t26-donut-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--t26-primary-base, #0f2a4a);
    margin-bottom: 20px;
    font-family: var(--t26-font-family);
}

.t26-donut-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

/* Anpassung des Akkordeon-Buttons für diese Boxen */
.t26-donut-item .t26-accordion-btn {
    text-align: center;
    padding: 8px 15px;
    font-size: 0.95rem;
    width: 100%; /* Über die volle Breite für saubere Kanten */
    margin-bottom: 0;
}

/* Der Info-Inhalt unterhalb der Buttons */
.t26-donut-item .t26-accordion-content {
    width: 100%;
    text-align: left;
    border: none;
    border-top: 1px solid var(--t26-border-color, #cbd5e1);
    border-radius: 0 0 8px 8px;
    background-color: transparent;
    padding: 0;
    margin-top: 0;
}

.t26-donut-item .t26-accordion-content.is-open {
    padding-top: 15px;
}

/* ==========================================================================
   14. T26 MODULES & THEMES (Akkordeon-Layout)
   ========================================================================== */
.t26-modules-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: left;
}

/* Flexbox Layout für Bild (links) und Text (rechts) */
.t26-module-layout {
    display: flex;
    flex-direction: column; /* Mobile: untereinander */
    gap: 20px;
    padding-top: 15px;
}

@media (min-width: 768px) {
    .t26-module-layout {
        flex-direction: row; /* Desktop: nebeneinander */
        align-items: flex-start;
    }
}

/* Der Container für das Modul-Icon */
.t26-module-image {
    flex-shrink: 0;
    width: 140px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--t26-bg-surface, #ffffff);
    border: 1px solid var(--t26-border-color, #cbd5e1);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--t26-shadow-color, rgba(10, 17, 40, 0.05));
}

.t26-module-image img {
    width: 100%;
    height: auto;
    display: block;
}

.t26-module-details {
    flex-grow: 1;
}

/* ==========================================================================
   14.1 T26 STATUS BADGES (Pillen)
   ========================================================================== */
.t26-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--t26-font-family);
}

.t26-badge--warning {
    background-color: #fef08a; /* Helles Gelb/Orange */
    color: #854d0e;
    border: 1px solid #fde047;
}

.t26-badge--success {
    background-color: #dcfce7; /* Helles Grün */
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* ==========================================================================
   14.2 T26 MODUL BUTTONS
   ========================================================================== */
.t26-module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Modifikator für eine kompaktere Button-Größe */
.t26-btn--small {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* ==========================================================================
   14.3 T26 KATEGORIE-TRENNER (Unterbrecher)
   ========================================================================== */
.t26-category-title {
    color: var(--t26-primary-base, #0f2a4a); /* T26 Midnight Blue */
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 30px 0 15px 0;
    letter-spacing: 1px;
    font-family: var(--t26-font-family);
}

/* Der allererste Titel direkt unter der Hauptüberschrift braucht weniger Abstand */
.t26-about-title + .t26-category-title {
    margin-top: 10px;
}

/* Der visuelle, edle Unterbrecher (Trennlinie) */
.t26-divider {
    border: 0;
    height: 1px;
    /* Sanfter Verlauf: Wird zur Mitte hin sichtbar und bladet an den Seiten aus */
    background-image: linear-gradient(to right, transparent, var(--t26-border-color, #cbd5e1), transparent);
    margin: 40px 0;
}

/* ==========================================================================
   15. T26 REFERENZEN (Logo-Grid)
   ========================================================================== */
.t26-references-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: center;
}

.t26-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 Spalten */
    gap: 20px;
    align-items: center;
    justify-items: center;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .t26-reference-grid {
        grid-template-columns: repeat(3, 1fr); /* Tablet: 3 Spalten */
        gap: 30px;
    }
}

@media (min-width: 992px) {
    .t26-reference-grid {
        grid-template-columns: repeat(6, 1fr); /* Desktop: Alle 6 nebeneinander */
    }
}

.t26-reference-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px;
    background-color: var(--t26-bg-lighter, #f8fafc);
    border: 1px solid var(--t26-border-color, #cbd5e1);
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    min-height: 110px;
    text-decoration: none;
}

.t26-reference-item img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    /* Eleganter Ruhezustand: Grau und leicht transparent */
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.3s ease;
}

/* T26 Hover Effekt */
.t26-reference-item:hover {
    border-color: var(--t26-accent-color, #378ADD);
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--t26-focus-shadow, rgba(55, 138, 221, 0.15));
}

.t26-reference-item:hover img {
    /* Volle Farbe und Deckkraft beim Darüberfahren */
    filter: grayscale(0%) opacity(1);
}

.t26-reference-item img,
.t26-reference-item svg {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    /* Eleganter Ruhezustand für Bilder und SVGs */
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.3s ease;
    /* Standard-Farbe für die SVG-Schrift (Grau) */
    color: var(--t26-border-color, #cbd5e1);
}

/* T26 Hover Effekt */
.t26-reference-item:hover {
    border-color: var(--t26-accent-color, #378ADD);
    transform: translateY(-5px);
    box-shadow: 0 8px 15px var(--t26-focus-shadow, rgba(55, 138, 221, 0.15));
}

.t26-reference-item:hover img,
.t26-reference-item:hover svg {
    /* Volle Deckkraft und Farbe beim Hover */
    filter: grayscale(0%) opacity(1);
    /* Beim Hover schaltet das SVG auf Electric Azure um */
    color: var(--t26-accent-color, #378ADD);
}

/* ==========================================================================
   16. T26 SPENDEN / SUPPORT SEKTION
   ========================================================================== */
.t26-donate-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: center;
}

.t26-donate-text {
    margin-bottom: 30px;
    color: var(--t26-text-muted, #64748b);
    font-size: 1.05rem;
    line-height: 1.6;
}

.t26-donate-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.t26-donate-item {
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 8px;
    /* Leichte Transparenz im Ruhezustand wirkt edler */
    filter: opacity(0.85);
}

.t26-donate-item img {
    display: block;
    max-width: 200px; /* Begrenzt die maximale Breite der Logos */
    height: auto;
}

/* T26 Hover-Effekt: Volle Deckkraft und leichtes Anheben */
.t26-donate-item:hover {
    transform: translateY(-5px);
    filter: opacity(1);
}

/* ==========================================================================
   17. T26 KONTAKTFORMULAR & ALERTS
   ========================================================================== */
.t26-contact-card {
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.08));
    border: 1px solid var(--t26-border-color, #cbd5e1);
    background-color: var(--t26-bg-surface, #ffffff);
    margin-top: 40px;
    text-align: left;
}

.t26-form-container {
    margin-top: 30px;
}

.t26-form-group {
    margin-bottom: 20px;
}

.t26-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--t26-primary-base, #0f2a4a);
    font-family: var(--t26-font-family);
}

.t26-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--t26-border-color, #cbd5e1);
    border-radius: 8px;
    font-family: var(--t26-font-family);
    font-size: 1rem;
    background-color: var(--t26-bg-lighter, #f8fafc);
    color: var(--t26-text-main, #0f172a);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.t26-form-control:focus {
    outline: none;
    border-color: var(--t26-accent-color, #378ADD);
    /* Weicher, blauer Glow beim Reinklicken */
    box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.2);
}

textarea.t26-form-control {
    resize: vertical;
}

/* ==========================================================================
   17.1 T26 SYSTEMMELDUNGEN (ALERTS)
   ========================================================================== */
.t26-alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
    font-family: var(--t26-font-family);
}

.t26-alert-success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.t26-alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.t26-alert-info {
    background-color: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
}

/* ==========================================================================
   99. T26 LAYOUT-KARTEN HOVER-DEAKTIVIERUNG
   ========================================================================== */
.t26-about-card:hover,
.t26-social-card:hover,
.t26-stream-card:hover,
.t26-projects-card:hover,
.t26-homepages-card:hover,
.t26-modules-card:hover,
.t26-references-card:hover,
.t26-donate-card:hover,
.t26-contact-card:hover,
.t26-compliance-content:hover {
    transform: none;
    border-color: var(--t26-border-color, #cbd5e1);
    box-shadow: 0 10px 30px var(--t26-shadow-color, rgba(10, 17, 40, 0.10));
}

/* Erweitert den unsichtbaren Käfig der Navigation auf fast volle Bildschirmbreite */
.t26-main-nav .t26-container,
.t26-nav-wrapper {
    max-width: 1600px; /* Gibt dem Menü massiv mehr Platz */
    width: 100%;
    padding: 0 20px;
}

/* ==========================================================================
   T26 MINIFORM SYSTEMMELDUNGEN (Erfolg & Fehler)
   ========================================================================== */

/* Basis-Styling für die Nachrichten-Box (WBCE {MESSAGE_CLASS}) */
.t26-contact-section .success,
.t26-contact-section .error {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent;
    display: block;
}

/* Erfolgsmeldung - Entspricht dem Design von t26-alert-success */
.t26-contact-section .success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

/* Fehlermeldung - Entspricht dem Design von t26-alert-danger */
.t26-contact-section .error {
    background-color: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}