/* ==========================================
   GRUNDLAGE
   ========================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f1e9;
    color: #1d2924;
    overflow: hidden;
}

main {
    width: 100vw;
    height: 100vh;
}

/* ==========================================
   HAUPTANSICHT
   ========================================== */

#hauptansicht {
    display: grid;

    grid-template-rows:
        19vh
        1fr
        11vh;

    gap: 1.5vh;

    padding: 2vh 2vw;
}


/* ==========================================
   HEADER
   ========================================== */

#haupt-header {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    background: #8d734a;
    color: white;

    border-radius: 20px;

    padding: 1.5vh 2vw;
}


/* ==========================================
   DATUM
   ========================================== */

.datum-block,
.hidschri-block {
    line-height: 1.5;
}

#miladi-datum-tr,
#hidschri-datum-tr {
    font-size: 1.65vw;
    font-weight: 700;
}

#miladi-datum-en,
#hidschri-datum-en {
    font-size: 1.35vw;
    margin-top: 0.3vh;
}


/* ==========================================
   GROSSE UHR
   ========================================== */

#uhrzeit {
    font-size: 6vw;
    font-weight: 700;

    text-align: center;

    letter-spacing: 0.04em;

    padding: 0 3vw;
}


/* ==========================================
   HIDSCHRI-DATUM
   ========================================== */

.hidschri-block {
    text-align: right;
    line-height: 1.5;
}

.datum-block {
    text-align: left;
}


/* ==========================================
   HAUPTINHALT
   ========================================== */

#hauptinhalt {
    display: grid;

    grid-template-columns:
        35%
        1fr;

    gap: 1.5vw;

    min-height: 0;
}


/* ==========================================
   TAKVIM-ZEITEN
   ========================================== */

#gebetsbereich {
    background: white;

    border-radius: 20px;

    padding: 1.5vh 1.5vw;

    min-height: 0;
}

#gebetsbereich h2 {
    margin:
        0
        0
        1vh
        0;

    text-align: center;

    font-size: 2vw;
}


/* ==========================================
   ZEITENLISTE
   ========================================== */

#gebetszeiten {
    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    height: calc(100% - 4vh);
}

.zeit-zeile {
    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 5vh;

    padding:
        0.5vh
        0.8vw;

    border-radius: 12px;

    border-bottom:
        1px solid #d9dedb;

    transition:
        all 0.3s ease;
}

.zeit-name {
    font-size: 1.45vw;
}

.zeit-uhr {
    font-size: 1.8vw;
}


/* ==========================================
   AKTUELL LAUFENDE NAMAZ-ZEIT
   ========================================== */

.zeit-zeile.aktuelle-namaz {
    background: #8d734a;
    color: white;

    padding:
        1vh
        1vw;

    transform:
        scale(1.035);

    border-bottom: none;
}

.zeit-zeile.aktuelle-namaz .zeit-name {
    font-size: 1.75vw;
    font-weight: 700;
}

.zeit-zeile.aktuelle-namaz .zeit-uhr {
    font-size: 2.45vw;
    font-weight: 800;
}

.zeit-zeile.nacht-abgeschwaecht,
.zeit-zeile.vergangene-zeit {
    opacity: 0.28;
    background: #f4f4f4;
}

.zeit-zeile.aktuelle-namaz {
    opacity: 1;
}

.nacht-trennlinie {
    height: 3px;
    margin: 0.35vh 0;
    border-radius: 999px;
    background: #8d734a;
}


/* ==========================================
   TAGESINHALT
   ========================================== */

#tagesbereich {
    background: white;

    border-radius: 20px;

    padding:
        2vh
        2.5vw;

    display: flex;

    flex-direction: column;

    min-height: 0;
}

#tagesbereich h2 {
    margin:
        0
        0
        1.5vh
        0;

    text-align: center;

    font-size: 2vw;
}

#tagesinhalt {
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    overflow: hidden;
}

.front-text {
    font-size: 2vw;

    line-height: 1.45;
}

.arabisch {
    margin-top: 0;

    font-size: 2.35vw;

    line-height: 1.6;

    direction: rtl;
}

#tages-uebersetzung {
    margin-top: 2.5vh;
}


/* ==========================================
   TAGESHINWEISE
   ========================================== */

#sonderbereich {
    background: #e6e0cf;

    border-radius: 20px;

    padding:
        1vh
        2vw;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    min-height: 0;
    min-width: 0;
    overflow: visible;

    font-size: 1.25vw;
}

#bugun-tarihte:empty {
    display: none;
}

#bugun-tarihte {
    width: 100%;
}


#bugun-tarihte.history-vollbreit {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 1.25;
}

#bugun-tarihte .history-eintrag {
    flex: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.2em;
}

#bugun-tarihte .history-eintrag:last-child {
    margin-bottom: 0;
}