/*
Theme Name: Spreitenbach
*/


/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v49-latin-regular.woff2') format('woff2'); 
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v49-latin-500.woff2') format('woff2'); 
}

/* roboto-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v49-latin-700.woff2') format('woff2');
}



/********************************************
                ROOT
*********************************************/
:root {
	--font-primary: 'Roboto', sans-serif;
    --body-bg: #222222;
    --table-head-bg: #79727A;
    --table-row-bg: #4B4A52;
    --text-color: #fff;
    --frei-bg: #129B29;
    --belegt-bg: #AB0404;
}

/********************************************
                BODY
*********************************************/
body {
	font-family: var(--font-primary);
    background-color: var(--body-bg);
    color: var(--text-color);
    width: 1920px;
    height: 1080px;
}

/********************************************
                BODY
*********************************************/
.frei {
    background-color: var(--frei-bg) !important;
}
.belegt {
    background-color: var(--belegt-bg) !important;
}
.bg-light-grey {
    background-color: var(--table-head-bg);
}
.bg-row-grey {
    background-color: var(--table-row-bg);
}
.fw-700 {
    font-weight: 700;
}
.fw-500 {
    font-weight: 500;
}

/********************************************
                UPPER
*********************************************/
.upper-part {
    gap: 140px;
    padding: 32px;
}
.main-table td, .main-table th {
    font-size: 22px;
    line-height: 1;
}
.main-table {
    min-width: 690px;
}
.main-table th {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 4.5px;
}

.main-table td {
    padding-top: 4.5px;
    padding-bottom: 4.5px;
    padding-left: 0;
    padding-right: 0;
}
.main-table tr:last-of-type td {
    padding-bottom: 0;
}
.main-table td div, 
.main-table th div {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}
.main-table th div {
    font-weight: 700;
}
/********************************************
                FOOTER
*********************************************/
.footer {
    padding: 8px 100px 8px 100px;
    gap: 99px;
}
.footer-qr {
    height: 141px;
    width: 141px;
}
.footer-qr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-title {
    font-size: 48px;
    line-height: 1;
}
.footer-text {
    font-size: 39px;
    line-height: 1;
    max-width: 804px;
}
.footer-text p {
    margin-bottom: 0;
}