/**
 * tt-flex System - Final Master Build 2025 (FULL & VERIFIED)
 * Desktop-First Layout | Full Variable Set | Legacy Support
 */

/* 1. BASIS SETUP */
.tt-flex-inner, 
.tt-flex-inner-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.tt-flex-inner *, 
.tt-flex-inner-header *, 
.tt-flex-inner *::before, 
.tt-flex-inner *::after {
    box-sizing: inherit;
}

.tt-flex-td {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    word-break: normal;
    overflow-wrap: break-word;
    padding: var(--pt, 0px) var(--pr, 0px) var(--pb, 0px) var(--pl, 0px);
    margin: var(--mt, 0px) 0 var(--mb, 0px) 0;
    hyphens: auto;
}

/* 2. VARIABLEN SYSTEM & GLOBAL HELPER */
[class*="tt-flex-p"], 
[class*="tt-flex-m"] { 
    --v1: 1px; --v2: 2px; --v5: 5px; --v8: 8px; --v10: 10px; --v15: 15px; --v20: 20px; --v25: 25px; 
}

/* Padding Rundum - Jetzt universell nutzbar */
.tt-flex-p1 {--pt:var(--v1);--pr:var(--v1);--pb:var(--v1);--pl:var(--v1); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p2 {--pt:var(--v2);--pr:var(--v2);--pb:var(--v2);--pl:var(--v2); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p5 {--pt:var(--v5);--pr:var(--v5);--pb:var(--v5);--pl:var(--v5); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p8 {--pt:var(--v8);--pr:var(--v8);--pb:var(--v8);--pl:var(--v8); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p10 {--pt:var(--v10);--pr:var(--v10);--pb:var(--v10);--pl:var(--v10); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p15 {--pt:var(--v15);--pr:var(--v15);--pb:var(--v15);--pl:var(--v15); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p20 {--pt:var(--v20);--pr:var(--v20);--pb:var(--v20);--pl:var(--v20); padding: var(--pt) var(--pr) var(--pb) var(--pl);}
.tt-flex-p25 {--pt:var(--v25);--pr:var(--v25);--pb:var(--v25);--pl:var(--v25); padding: var(--pt) var(--pr) var(--pb) var(--pl);}

/* Padding Einzel-Seiten - Jetzt universell nutzbar */
.tt-flex-pt1 {--pt:var(--v1); padding-top: var(--pt)} .tt-flex-pt2 {--pt:var(--v2); padding-top: var(--pt)} .tt-flex-pt5 {--pt:var(--v5); padding-top: var(--pt)} .tt-flex-pt8 {--pt:var(--v8); padding-top: var(--pt)} .tt-flex-pt10 {--pt:var(--v10); padding-top: var(--pt)} .tt-flex-pt15 {--pt:var(--v15); padding-top: var(--pt)} .tt-flex-pt20 {--pt:var(--v20); padding-top: var(--pt)} .tt-flex-pt25 {--pt:var(--v25); padding-top: var(--pt)}
.tt-flex-pb1 {--pb:var(--v1); padding-bottom: var(--pb)} .tt-flex-pb2 {--pb:var(--v2); padding-bottom: var(--pb)} .tt-flex-pb5 {--pb:var(--v5); padding-bottom: var(--pb)} .tt-flex-pb8 {--pb:var(--v8); padding-bottom: var(--pb)} .tt-flex-pb10 {--pb:var(--v10); padding-bottom: var(--pb)} .tt-flex-pb15 {--pb:var(--v15); padding-bottom: var(--pb)} .tt-flex-pb20 {--pb:var(--v20); padding-bottom: var(--pb)} .tt-flex-pb25 {--pb:var(--v25); padding-bottom: var(--pb)}
.tt-flex-pl1 {--pl:var(--v1); padding-left: var(--pl)} .tt-flex-pl2 {--pl:var(--v2); padding-left: var(--pl)} .tt-flex-pl5 {--pl:var(--v5); padding-left: var(--pl)} .tt-flex-pl8 {--pl:var(--v8); padding-left: var(--pl)} .tt-flex-pl10 {--pl:var(--v10); padding-left: var(--pl)} .tt-flex-pl15 {--pl:var(--v15); padding-left: var(--pl)} .tt-flex-pl20 {--pl:var(--v20); padding-left: var(--pl)} .tt-flex-pl25 {--pl:var(--v25); padding-left: var(--pl)}
.tt-flex-pr1 {--pr:var(--v1); padding-right: var(--pr)} .tt-flex-pr2 {--pr:var(--v2); padding-right: var(--pr)} .tt-flex-pr5 {--pr:var(--v5); padding-right: var(--pr)} .tt-flex-pr8 {--pr:var(--v8); padding-right: var(--pr)} .tt-flex-pr10 {--pr:var(--v10); padding-right: var(--pr)} .tt-flex-pr15 {--pr:var(--v15); padding-right: var(--pr)} .tt-flex-pr20 {--pr:var(--v20); padding-right: var(--pr)} .tt-flex-pr25 {--pr:var(--v25); padding-right: var(--pr)}

/* Margin System - Jetzt universell nutzbar */
.tt-flex-mt1 {--mt:var(--v1); margin-top: var(--mt)} .tt-flex-mt2 {--mt:var(--v2); margin-top: var(--mt)} .tt-flex-mt5 {--mt:var(--v5); margin-top: var(--mt)} .tt-flex-mt8 {--mt:var(--v8); margin-top: var(--mt)} .tt-flex-mt10 {--mt:var(--v10); margin-top: var(--mt)} .tt-flex-mt15 {--mt:var(--v15); margin-top: var(--mt)} .tt-flex-mt20 {--mt:var(--v20); margin-top: var(--mt)} .tt-flex-mt25 {--mt:var(--v25); margin-top: var(--mt)}
.tt-flex-mb1 {--mb:var(--v1); margin-bottom: var(--mb)} .tt-flex-mb2 {--mb:var(--v2); margin-bottom: var(--mb)} .tt-flex-mb5 {--mb:var(--v5); margin-bottom: var(--mb)} .tt-flex-mb8 {--mb:var(--v8); margin-bottom: var(--mb)} .tt-flex-mb10 {--mb:var(--v10); margin-bottom: var(--mb)} .tt-flex-mb15 {--mb:var(--v15); margin-bottom: var(--mb)} .tt-flex-mb20 {--mb:var(--v20); margin-bottom: var(--mb)} .tt-flex-mb25 {--mb:var(--v25); margin-bottom: var(--mb)}

/* 3. AUSRICHTUNG & SPEZIAL */
.tt-flex-c { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center !important; } 
.tt-flex-r { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end !important; } 
.tt-flex-t { -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start !important; } 
.tt-flex-text-r { -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end !important; text-align: right !important; }
.tt-flex-text-c { -webkit-box-align: center; -webkit-align-items: center; align-items: center !important; text-align: center !important; }

.tt-flex-hr { width: 100%; height: 1px; background-color: #eee; margin: var(--mt, 0px) 0 var(--mb, 0px) 0; -webkit-flex: 0 0 100%; flex: 0 0 100%; }

.tt-flex-config { 
    font-family: monospace; 
    line-height: 1.5; 
    word-break: break-all !important; 
    overflow-wrap: anywhere !important;
}

.tt-flex-headline { background: #333; color: #ffffff; font-weight: bold; }
.tt-flex-border-r { border-left: 1px solid #333;}
.tt-flex-border-l { border-right: 1px solid #333;}
.tt-flex-border-b { border-bottom: 1px solid #333;}
.tt-flex-border-t { border-top: 1px solid #333;}
.tt-flex-border { border: 1px solid #333;}

/* 4. BREITENKLASSEN (Stabile Prozentwerte) */
.tt-flex-w5 {width: 5%} .tt-flex-w10 {width: 10%} .tt-flex-w15 {width: 15%} 
.tt-flex-w20 {width: 20%} .tt-flex-w25 {width: 25%} .tt-flex-w30 {width: 30%} 
.tt-flex-w33 {width: 33.333%} .tt-flex-w35 {width: 35%} .tt-flex-w36 {width: 36%} 
.tt-flex-w40 {width: 40%} .tt-flex-w45 {width: 45%} .tt-flex-w50 {width: 50%} 
.tt-flex-w55 {width: 55%} .tt-flex-w60 {width: 60%} .tt-flex-w64 {width: 64%} 
.tt-flex-w65 {width: 65%} .tt-flex-w66 {width: 66.666%} .tt-flex-w70 {width: 70%} 
.tt-flex-w75 {width: 75%} .tt-flex-w80 {width: 80%} .tt-flex-w85 {width: 85%} 
.tt-flex-w90 {width: 90%} .tt-flex-w95 {width: 95%} .tt-flex-w100 {width: 100%}

/* FIX: Verhindert den Umbruch im Column-Modus */
.tt-flex-td i, 
.tt-flex-td a {
    display: inline !important;
    width: auto !important;
}

.tt-flex-td i {
    margin-right: 5px;
}

/* 5. DESKTOP-FIRST RESPONSIVE */
@media (max-width: 992px) {
    .tt-flex-inner-header { display: none !important; }
    .tt-flex-inner { 
        -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column !important; flex-direction: column !important; 
    }
    .tt-flex-inner .tt-flex-td { 
        width: 100% !important; text-indent: 0 !important; --pl: 10px; padding-left: 10px;
    }
}