.oneByOneAspectRatio::after { padding-top: 100%; display: block; content: ''; } .hyphenate { /* Sorgt dafür, dass Wörter getrennt werden dürfen */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; /* Optional: Erlaubt Umbruch auch mitten im Wort, wenn hyphens nicht greift */ word-wrap: break-word; overflow-wrap: break-word; } .widthOne { width: 6.57%; } .widthTwo { width: 15%; } .widthFour { width: 32%; } .widthFive { width: 38.5%; } .widthThree { width: 23.8%; } .heightOne { height: 13.3%; } .heightTwo { height: 30.5%; } .heightFour { height: 65%; } .hasColorImg { background-size: cover; } .hasColorImg .title { width: 100%; background: linear-gradient(to right, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.25) 40%, rgba(25, 25, 25, 0.1) 50%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; padding: 20px; color: white; } @media (max-width: 1199px) { .hasColorImg .title { padding: 15px; } } @media (max-width: 1199px) and (max-width: 992px) { .hasColorImg .title { padding: 10px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { .hasColorImg .title { padding: 5px; } } #startGridWrapper { margin-top: -50px; width: 1200px; } @media (max-width: 1199px) { #startGridWrapper { width: 993px; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper { width: 769px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper { width: 577px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) and (max-width: 576px) { #startGridWrapper { display: none; } } #startGridWrapper .startGrid .cell .title { padding: 0 15px; } #startGridWrapper .startGrid > .cell { background-size: 33%; } #startGridWrapper .startGrid > .cell.home { top: 0; left: 0; width: 15%; height: 30.5%; background: #8a1978; cursor: pointer; overflow: visible; } #startGridWrapper .startGrid > .cell.home::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid > .cell.home::before { position: absolute; color: white; font-size: 125px; width: 100%; text-align: center; margin-top: 17%; z-index: 2; } @media (max-width: 1199px) { #startGridWrapper .startGrid > .cell.home::before { font-size: 90px; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid > .cell.home::before { font-size: 66px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid > .cell.home::before { font-size: 52px; } } #startGridWrapper .startGrid > .cell.home .content { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; overflow: hidden; background: #8a1978; padding: 80px 80px 40px 200px; z-index: 1; border-radius: inherit; font-family: Roboto, Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.5em; cursor: default; transition: all 0.5s ease; } @media (max-width: 1199px) { #startGridWrapper .startGrid > .cell.home .content { padding: 50px 50px 25px 50px; font-size: 16px; line-height: 1.2em; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid > .cell.home .content { padding: 30px 20px 20px 20px; font-size: 11px; line-height: 1.2em; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid > .cell.home .content { padding: 5px 10px 5px 10px; font-size: 9px; line-height: 1.2em; } } #startGridWrapper .startGrid > .cell.home.open { box-shadow: none; } #startGridWrapper .startGrid > .cell.home.open .content { opacity: 1; width: 668%; height: 375%; pointer-events: initial; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel1 { top: 0; left: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel1::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel2 { top: 0; right: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel2::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel3 { top: 0; right: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel3::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel4 { top: 34%; right: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel4::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel5 { top: 34%; right: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel5::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel6 { top: 34%; left: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel6::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel7 { top: 34%; left: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel7::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel8 { bottom: 0; left: 0; width: 15%; height: 30.5%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel9 { bottom: 0; left: 17%; width: 15%; height: 30.5%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel10 { bottom: 0; right: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel10::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel11 { bottom: 0; right: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#Seite1Kachel11::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#mainImage { top: 0; left: 34%; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/mainPic.jpg'); } #startGridWrapper .startGrid#svzStartGridA > .cell#mainImage::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#mainImage .title { width: 100%; background: linear-gradient(to right, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.25) 40%, rgba(25, 25, 25, 0.1) 50%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; padding: 20px; color: white; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridA > .cell#mainImage .title { padding: 15px; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridA > .cell#mainImage .title { padding: 10px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridA > .cell#mainImage .title { padding: 5px; } } #startGridWrapper .startGrid#svzStartGridA > .cell#date { bottom: 0; left: 34%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#date::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div { position: absolute; width: 100%; text-align: center; font-family: "OpenSansLight", Arial, sans-serif; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfWeek { top: 10%; font-size: 21px; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfMonth { top: 20%; font-size: 100px; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div.monthYear { bottom: 10%; font-size: 21px; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#svzStartGridA > .cell#date div.monthYear { font-size: 18px; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfMonth { top: 25%; font-size: 55px; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#svzStartGridA > .cell#date div.monthYear { font-size: 15px; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfMonth { top: 25%; font-size: 40px; } } @media (max-width: 1199px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfWeek, #startGridWrapper .startGrid#svzStartGridA > .cell#date div.monthYear { font-size: 12px; } #startGridWrapper .startGrid#svzStartGridA > .cell#date div.dayOfMonth { font-size: 30px; } } #startGridWrapper .startGrid#svzStartGridA > .cell#weather { display: block; bottom: 0; left: 51%; width: 15%; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 { margin: 20px; width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; text-align: center; font-size: 18px; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 { margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 { margin: 5px; width: calc(100% - 10px); height: calc(100% - 10px); } } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div { position: absolute; left: 0; width: 100%; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName { top: 0; height: 15%; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName { font-size: 16px; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName div:first-of-type { display: none; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName { font-size: 16px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName { font-size: 10px; } } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div { top: 20%; height: 80%; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div { height: 100%; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div:last-of-type { display: none; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div { position: absolute !important; width: 100%; left: 0; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:first-of-type { height: 80%; top: -13%; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:first-of-type img { max-height: 100%; max-width: 100%; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25)); } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { bottom: 0; font-size: 14px; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 12px; } #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type div:first-of-type { display: none; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 10px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridA > .cell#weather .padding15 > div.cityName + div > div > div:last-of-type { font-size: 8px; } } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel1 { top: 34%; left: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel1::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel2 { top: 34%; left: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel2::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel3 { bottom: 0; left: 0; width: 15%; height: 30.5%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel3::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel4 { bottom: 0; left: 17%; width: 15%; height: 30.5%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel5 { top: 0; left: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel5::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel6 { top: 0; right: 17%; height: 30.5%; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel7 { top: 0; right: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel7::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel8 { top: 34%; right: 17%; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel8::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel9 { top: 34%; right: 0; width: 15%; height: 30.5%; } #startGridWrapper .startGrid#svzStartGridB > .cell#Seite2Kachel10 { bottom: 0; right: 0; width: 32%; height: 30.5%; } #startGridWrapper .startGrid#svzStartGridB > .cell#mainImageB { top: 0; left: 34%; width: 32%; background-size: cover; background-image: url('../graphX/startGrid/mainPic.jpg'); } #startGridWrapper .startGrid#svzStartGridB > .cell#mainImageB::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#mainImageB .title { width: 100%; background: linear-gradient(to right, rgba(25, 25, 25, 0.75) 0%, rgba(25, 25, 25, 0.25) 40%, rgba(25, 25, 25, 0.1) 50%, rgba(0, 0, 0, 0) 100%); left: 0; bottom: 0; padding: 20px; color: white; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridB > .cell#mainImageB .title { padding: 15px; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridB > .cell#mainImageB .title { padding: 10px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridB > .cell#mainImageB .title { padding: 5px; } } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB { bottom: 0; left: 34%; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div { position: absolute; width: 100%; text-align: center; font-family: "OpenSansLight", Arial, sans-serif; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfWeek { top: 10%; font-size: 21px; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfMonth { top: 20%; font-size: 80px; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.monthYear { bottom: 10%; font-size: 21px; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfWeek, #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.monthYear { font-size: 18px; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfMonth { top: 25%; font-size: 60px; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfWeek, #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.monthYear { font-size: 15px; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfMonth { top: 25%; font-size: 50px; } } @media (max-width: 1199px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfWeek, #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.monthYear { font-size: 12px; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateB div.dayOfMonth { font-size: 35px; } } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB { display: block; bottom: 0; left: 51%; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 { margin: 20px; width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; text-align: center; font-size: 18px; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 { margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px); } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 { margin: 5px; width: calc(100% - 10px); height: calc(100% - 10px); } } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div { position: absolute; left: 0; width: 100%; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName { top: 0; height: 15%; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName { font-size: 16px; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName div:first-of-type { display: none; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName { font-size: 14px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName { font-size: 12px; } } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div { top: 20%; height: 80%; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div { height: 100%; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div:last-of-type { display: none; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div { position: absolute !important; width: 100%; left: 0; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:first-of-type { height: 80%; top: -13%; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:first-of-type img { max-height: 100%; max-width: 100%; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25)); } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:last-of-type { bottom: 0; font-size: 14px; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:last-of-type { font-size: 12px; } #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:last-of-type div:first-of-type { display: none; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:last-of-type { font-size: 10px; } } @media (max-width: 1199px) and (max-width: 992px) and (max-width: 768px) { #startGridWrapper .startGrid#svzStartGridB > .cell#weatherB .padding15 > div.cityName + div > div > div:last-of-type { font-size: 8px; } }