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

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.t26-construction-wrapper {
    display:         flex;
    justify-content: center;
    align-items:     center;
    min-height:      60vh;
    padding:         40px 20px;
    box-sizing:      border-box;
    text-align:      center;
}

/* ── Inhaltsbox ──────────────────────────────────────────────────────────── */
.t26-construction-box {
    max-width: 600px;
    width:     100%;
}

/* ── Zahnrad-Animation ───────────────────────────────────────────────────── */
.t26-animation-gear {
    font-size:    80px;
    display:      inline-block;
    line-height:  1;
    margin-bottom: 30px;
    animation:    t26-spin 4s linear infinite;
}

@keyframes t26-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ── Überschrift (Werte kommen via CSS-Variablen aus view.php) ───────────── */
.t26-construction-headline {
    color:       var(--t26c-headline-color, #ffffff);
    font-family: var(--t26c-headline-font,  sans-serif);
    font-size:   var(--t26c-headline-size,  24px);
    margin:      0 0 25px 0;
    line-height: 1.4;
}

/* ── Timer-Ausgabe ───────────────────────────────────────────────────────── */
.t26-timer-display {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    flex-wrap:       wrap;
    gap:             20px;
    margin-top:      10px;
}

/* Einzelne Timer-Einheit (Tage / Stunden / Minuten / Sekunden) */
.t26-timer-unit {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      70px;
}

.t26-timer-value {
    color:       var(--t26c-timer-color, #ffb86c);
    font-family: var(--t26c-timer-font,  sans-serif);
    font-size:   var(--t26c-timer-size,  32px);
    font-weight: bold;
    line-height: 1;
}

.t26-timer-label {
    color:       var(--t26c-timer-color, #ffb86c);
    font-family: var(--t26c-timer-font,  sans-serif);
    font-size:   calc(var(--t26c-timer-size, 32px) * 0.4);
    opacity:     0.75;
    margin-top:  6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Launch-Meldung ──────────────────────────────────────────────────────── */
.t26-timer-launched {
    color:       var(--t26c-timer-color, #ffb86c);
    font-family: var(--t26c-timer-font,  sans-serif);
    font-size:   calc(var(--t26c-timer-size, 32px) * 1.5);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .t26-animation-gear {
        font-size: 56px;
    }
    .t26-timer-unit {
        min-width: 54px;
    }
}