.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: #e30421; 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: #e30421; 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#emptyA { top: 0; left: 8.5%; width: 6.57%; } #startGridWrapper .startGrid#svzStartGridA > .cell#emptyA::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#emptyB { top: 17%; left: 0; width: 15%; height: 13.3%; } #startGridWrapper .startGrid#svzStartGridA > .cell#fahrplan { bottom: 0; right: 17%; width: 15%; background-image: url('../graphX/startGrid/fahrplan.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#fahrplan::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#fahrtbericht { bottom: 0; right: 0; width: 15%; background-image: url('../graphX/startGrid/betriebsmitteilungen.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#fahrtbericht::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#wagenkarten { top: 34%; left: 0; width: 15%; background-image: url('../graphX/startGrid/karten.png'); background-position-y: 25%; background-size: 55%; } #startGridWrapper .startGrid#svzStartGridA > .cell#wagenkarten::after { padding-top: 100%; display: block; content: ''; } @media (max-width: 1199px) { #startGridWrapper .startGrid#svzStartGridA > .cell#wagenkarten { background-size: 55%; } } @media (max-width: 1199px) and (max-width: 992px) { #startGridWrapper .startGrid#svzStartGridA > .cell#wagenkarten { background-size: 45%; } } #startGridWrapper .startGrid#svzStartGridA > .cell#fahrzeugeinteilung { top: 0; left: 17%; width: 15%; background-image: url('../graphX/startGrid/fahrzeugeinteilung.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#fahrzeugeinteilung::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#dienstplan { top: 34%; left: 17%; width: 15%; background-image: url('../graphX/startGrid/dienstplan.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#dienstplan::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#bereichsanweisungen { bottom: 0; left: 0; width: 15%; height: 30.5%; background-image: url('../graphX/startGrid/bereichsanweisungen.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#dienstanweisungen { bottom: 0; left: 17%; width: 15%; height: 30.5%; background-image: url('../graphX/startGrid/dienstanweisungen.png'); background-size: 55%; background-position-y: 25%; } #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: 10px; } } @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#svzStartGridA > .cell#einzelchat { top: 0; right: 17%; width: 15%; background-image: url('../graphX/startGrid/E-Mail.png'); background-size: 45%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#einzelchat::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#gruppenchat { top: 0; right: 0; width: 15%; background-image: url('../graphX/startGrid/messages.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#gruppenchat::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#betriebsmitteilungen { top: 34%; right: 0; width: 15%; background-image: url('../graphX/startGrid/betriebsmitteilungen.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#betriebsmitteilungen::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridA > .cell#betriebsrat { top: 34%; right: 17%; width: 15%; background-image: url('../graphX/startGrid/betriebsrat.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridA > .cell#betriebsrat::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#auszubildende { top: 34%; left: 0; width: 15%; background-image: url('../graphX/startGrid/auszubildende.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#auszubildende::after { padding-top: 100%; display: block; content: ''; } #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#fahrerschulung { bottom: 0; left: 0; width: 15%; height: 30.5%; background-image: url('../graphX/startGrid/fahrerschulung.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#fahrerschulung::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#tickets { bottom: 0; left: 17%; width: 15%; height: 30.5%; background-image: url('../graphX/startGrid/tickets.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#schulungsvideos { top: 0; left: 17%; width: 15%; background-image: url('../graphX/startGrid/videos.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#schulungsvideos::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#lehrfahrer { top: 34%; left: 17%; width: 15%; background-image: url('../graphX/startGrid/lehrfahrer.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#lehrfahrer::after { padding-top: 100%; display: block; content: ''; } #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: 100px; } #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; } } #startGridWrapper .startGrid#svzStartGridB > .cell#unfallmeldung { top: 0; right: 17%; height: 30.5%; width: 15%; background-image: url('../graphX/startGrid/unfallmeldung.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#schadensmeldung { top: 0; right: 0; width: 15%; background-image: url('../graphX/startGrid/schadensmeldung.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#schadensmeldung::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#fahrerkontrolle { top: 34%; right: 17%; width: 15%; background-image: url('../graphX/startGrid/fahrerkontrolle.png'); background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#fahrerkontrolle::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#dateiablage { top: 34%; right: 0; width: 15%; height: 30.5%; background-image: url('../graphX/startGrid/Downloads.png'); background-size: 55%; background-position-y: 25%; } #startGridWrapper .startGrid#svzStartGridB > .cell#emptyB1 { top: 34%; right: 0; width: 15%; } #startGridWrapper .startGrid#svzStartGridB > .cell#emptyB1::after { padding-top: 100%; display: block; content: ''; } #startGridWrapper .startGrid#svzStartGridB > .cell#fahrschuleStrassenbahn { bottom: 0;right: 0; width: 32%; height: 30.5%; background-image: url('../graphX/startGrid/eLearning.png'); background-position-y: 25%; }