/* =========================================================
   Wetter St. Pölten
   Stylesheet
========================================================= */


/* =========================================================
   Variablen
========================================================= */

:root{

    --bg1:#0b1020;
    --bg2:#111a35;

    --text:#eef2ff;
    --muted:#aab3d3;

    --purple:#7c3aed;
    --purple-light:#ddd6fe;

    --green:#22c55e;
    --green-light:#8df7b6;

    --blue:#60a5fa;
    --blue-light:#93c5fd;

    --yellow:#fbbf24;

    --error:#ef4444;
    --error-light:#ffb4b4;

    --border:rgba(255,255,255,.08);

    --glass:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

    --shadow:
        0 18px 40px rgba(0,0,0,.25);

    --shadow-hover:
        0 28px 60px rgba(0,0,0,.35);

    --radius:20px;

}



/* =========================================================
   Reset
========================================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



/* =========================================================
   Seite
========================================================= */

body{

    min-height:100vh;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;

    color:var(--text);

    background:

        radial-gradient(
            circle at top left,
            #2b3e85 0%,
            transparent 30%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(124,58,237,.20),
            transparent 35%
        ),

        linear-gradient(
            160deg,
            var(--bg1),
            var(--bg2)
        );

}



/* =========================================================
   Layout
========================================================= */

.wrap{

    max-width:1100px;

    margin:auto;

    padding:
        32px
        20px
        48px;

}



.hero{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:16px;

    margin-bottom:24px;

}



.eyebrow{

    margin-bottom:8px;

    color:var(--muted);

    font-size:.78rem;

    text-transform:uppercase;

    letter-spacing:.16em;

}



h1{

    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height:1.05;

}



.subtitle{

    margin-top:12px;

    color:var(--muted);

}



.foot{

    margin-top:18px;

    color:var(--muted);

    font-size:.95rem;

}



/* =========================================================
   Gemeinsame Glas-Komponente
========================================================= */

.glass{

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--glass);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        var(--shadow);

}



/* =========================================================
   Status
========================================================= */

.status-pill{

    padding:
        10px 14px;

    border:
        1px solid var(--border);

    border-radius:999px;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    white-space:nowrap;

    transition:
        .3s ease;

}



.status-pill.ok{

    background:
        rgba(34,197,94,.18);

    border-color:
        rgba(34,197,94,.35);

    color:
        var(--green-light);

}



.status-pill.error{

    background:
        rgba(239,68,68,.18);

    border-color:
        rgba(239,68,68,.35);

    color:
        var(--error-light);

}
/* =========================================================
   Wetter Grid
========================================================= */

.grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:16px;

    align-items:stretch;

}



/* =========================================================
   Wetterkarte
========================================================= */

.tile{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:150px;

    padding:18px;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    animation:
        fadeIn .5s ease;

}



/* dekorativer Rahmen */

.tile::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:
        1px solid rgba(255,255,255,.05);

    pointer-events:none;

}



/* dekorativer Lichtschein */

.tile::after{

    content:"";

    position:absolute;

    right:-40px;

    bottom:-40px;

    width:160px;

    height:160px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(124,58,237,.35),

            transparent 70%

        );

}



/* Hover nur auf Geräten mit Maus */

@media (hover:hover){

    .tile:hover{

        transform:
            translateY(-6px);

        border-color:
            rgba(124,58,237,.35);

        box-shadow:
            var(--shadow-hover);

    }

}



/* =========================================================
   Temperaturkarte
========================================================= */

.tile.accent{

    background:

        linear-gradient(

            135deg,

            var(--purple),

            #4f46e5 55%,

            var(--green)

        );

}



/* =========================================================
   Inhalte
========================================================= */

.label{

    display:block;

    margin-bottom:24px;

    color:var(--muted);

    font-size:.9rem;

}



strong{

    display:block;

    font-size:
        clamp(
            2.2rem,
            5vw,
            3.8rem
        );

    line-height:1;

    letter-spacing:-.04em;

    font-variant-numeric:
        tabular-nums;

}



small{

    display:block;

    margin-top:8px;

    color:var(--muted);

    font-size:.95rem;

}



/* =========================================================
   Animation
========================================================= */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:
            translateY(12px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}
/* =========================================================
   Prognose
========================================================= */

.forecast-card{

    margin-top:24px;

    padding:24px;

}



.forecast-card h2{

    margin-bottom:20px;

    font-size:1.4rem;

}



/* =========================================================
   Tabelle
========================================================= */

.table-wrapper{
    overflow-x:auto;
    border-radius:14px;
}


table{
    width:100%;
    min-width:650px;
    border-collapse:collapse;
}


/* Tabellenkopf */

thead{
    background:
        rgba(124,58,237,.20);
}

th{
    padding:14px 16px;
    text-align:left;
    color:var(--purple-light);
    font-size:.8rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* Tabelleninhalt */

td{

    padding:15px 16px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:var(--text);

    font-variant-numeric:
        tabular-nums;

}



/* Zeilen */

tbody tr{

    transition:
        background .2s ease;

}



tbody tr:hover{

    background:
        rgba(255,255,255,.05);

}



/* =========================================================
   Spaltenbreiten
========================================================= */

.col-time{
    width:100px;
}

.col-temp{
    width:70px;
}

.col-rain{
    width:70px;
}

.col-wind{
    width:40px;
}

.col-dir{
    width:20px;
}


/* =========================================================
   Farbige Werte
========================================================= */

td:nth-child(2){

    color:var(--yellow);

    font-weight:600;

    white-space:nowrap;

}


td:nth-child(3){

    color:var(--blue);

}


td:nth-child(4){

    color:var(--green-light);

    font-weight:600;

}


/* =========================================================
   Stunde
========================================================= */

.forecast-time .weekday {
  display: inline;
}

.forecast-time .time {
  display: inline;
}

/* =========================================================
   Windrichtung
========================================================= */

.wind-arrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    margin-right:8px;

    border-radius:50%;

    background:
        rgba(124,58,237,.25);

    color:var(--purple-light);

    font-size:1.3rem;

    font-weight:700;

    vertical-align:middle;

}



.wind-direction{

    display:inline-block;

    padding:5px 10px;

    border-radius:999px;

    background:
        rgba(96,165,250,.15);

    color:var(--blue-light);

    font-weight:700;

}
/* =========================================================
   Tablet
========================================================= */

@media (max-width:840px){

    .hero{

        flex-direction:column;

    }


    .grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}



/* =========================================================
   Smartphone
========================================================= */

@media (max-width:560px){

    .wrap{

        padding:
            24px
            14px
            40px;

    }


    /* Wetterkarten */

    .grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;

    }

    .tile{
        min-height:130px;
        padding:14px;
    }

    strong{
        font-size:2rem;
    }

    small{
        font-size:.9rem;
    }


    /*
       Optional:
       Temperaturkarte über volle Breite
       -> einfach auskommentieren,
       wenn alle Kacheln gleich groß bleiben sollen.
    */

    /*
    .tile.accent{

        grid-column:span 2;

    }
    */


    /* Prognose */

    .forecast-card{
        padding:18px;
    }

    .table-wrapper{
        overflow-x:auto;
    }

    table{
        min-width:320px;
    }

    th,
    td{
        padding:
            10px 8px;

        font-size:.85rem;
    }

    .col-time{
        width:50px;
    }

    .col-temp{
        width:50px;
    }

    .col-rain{
        width:50px;
    }

    .col-wind{
        width:30px;
    }


    .col-dir{
        width:10px;
    }

    /* nur Stunden anzeigen */

    .forecast-time .weekday {
       display: none;
    }

    /* nur Windpfeil anzeigen */

    .wind-direction{
        display:none;
    }


    .wind-arrow{
        width:38px;
        height:38px;
        margin-right:0;
        font-size:1.5rem;
    }


    /* Status */

    .status-pill{
        align-self:flex-start;
    }
}