Grid (Startpage)
CODE
×
HTML
<div class='startpage-grid'> <div class='header-oe sticky-header'> <a class='signet-oe-2' href="#" title="zur Startseite"> <img class='logo' alt='Logo des Kantons Bern' src='img/Kanton-Bern.svg'> <div class='logo-caption'>Internetportal des Kantons Bern</div> </a> <div class='service-nav' role='list'> <a class='service-menue red' href='#' role='listitem'>Leichte Sprache</a> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <a class='service-menue i2' href='#' role='listitem'>Jobs</a> <a class='service-menue login' href='#' role='listitem'>BE-Login</a> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div> <div class='main-nav' role="list"> <a class='main-menue i1' href='#' role='listitem'>E-Services und Dienstleistungen</a> <a class='main-menue i2' href='#' role='listitem'>Themen</a> <a class='main-menue i3' href='#' role='listitem'>Über uns</a> <a class='search-icon-mm' href='#' role='listitem'></a> </div> <div class='mobile-nav'> <a class='hamburger-icon'></a> <a class='search-icon-mobile'></a> </div> </div> <div class='full-width'> <h4 class='i7'>One-Column (Full-Width)</h4> </div> <div class='sharing'> <label class='sharing'>Seite teilen:</label> <div class='instagram-c'></div> <div class='twitter-c'></div> <div class='youtube-c'></div> <div class='facebook-c'></div> <div class='email-c'></div> </div> <div class='footer oe'> <div class='signet-oe-footer'> <img class='logo-oe-footer' src='img/Kanton-Bern.svg'> <div class='logo-caption-footer'>Internetportal des Kantons Bern</div> </div> <div class='intro-footer'>Offizielle Website des Kantons Bern: News, E-Services, aktuelle Themen, Übersicht der kantonalen Behörden, Gesetze, Jobs, ...</div> <p class='copyright cr-kbe'>© 2024 - Katnon Bern</p> <div class='label-footer'>Folgen Sie uns</div> <div class='sm-icons'> <div class='instagram-b'></div> <a class='tw-ico'></a> <a class='youtube-ico'></a> <a class='fb-ico'></a> </div> <div class='footer-nav'> <a class='footer-menue f1'>Kontakt</a> <a class='footer-menue f2'>Datenschutz</a> <a class='footer-menue f3'>Impressum</a> </div> <div class='footer-bg'></div> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.header-oe.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 767px) { div.header-oe.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a.service-menue { font-size: 14px; line-height: 16px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(0,0,0,1); display:inline-block; text-decoration:none !important; height: 18px; line-height: 1.5; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.service-menue:hover::after, a.service-menue:focus::after, a.service-menue:active::after { transform: scaleX(1); } a.main-menue { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; transform: scaleX(0); transition: all 150ms ease-in-out; } a.main-menue:hover::after, a.main-menue:focus::after, a.main-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.header-oe.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 767px) { div.header-oe.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a.service-menue { font-size: 14px; line-height: 16px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(0,0,0,1); display:inline-block; text-decoration:none !important; height: 18px; line-height: 1.5; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.service-menue:hover::after, a.service-menue:focus::after, a.service-menue:active::after { transform: scaleX(1); } a.main-menue { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; transform: scaleX(0); transition: all 150ms ease-in-out; } a.main-menue:hover::after, a.main-menue:focus::after, a.main-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.header-oe.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } div.footer.oe { padding-right: 30px; padding-left: 30px; height: 240px; } } @media screen and (max-width: 767px) { div.header-oe.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } div.footer.oe { padding-right: 20px; padding-left: 20px; } } div.footer { z-index: 9999; } @media screen and (min-width: 1440px) { div.footer-bg { width: 100vw; } } a.footer-menue:hover::after, a.footer-menue:focus::after, a.footer-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.header-oe.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 767px) { div.header-oe.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a.service-menue { font-size: 14px; line-height: 16px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(0,0,0,1); display:inline-block; text-decoration:none !important; height: 18px; line-height: 1.5; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.service-menue:hover::after, a.service-menue:focus::after, a.service-menue:active::after { transform: scaleX(1); } a.main-menue { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; transform: scaleX(0); transition: all 150ms ease-in-out; } a.main-menue:hover::after, a.main-menue:focus::after, a.main-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.header-oe.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } div.footer.oe { padding-right: 30px; padding-left: 30px; height: 240px; } } @media screen and (max-width: 767px) { div.header-oe.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } div.footer.oe { padding-right: 20px; padding-left: 20px; } } div.footer { z-index: 9999; } @media screen and (min-width: 1440px) { div.footer-bg { width: 100vw; } } a.footer-menue:hover::after, a.footer-menue:focus::after, a.footer-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.header-oe.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } div.footer.oe { padding-right: 30px; padding-left: 30px; height: 240px; } div.full-width { margin-left: 30px; margin-right: 30px; } } @media screen and (max-width: 767px) { div.header-oe.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } div.footer.oe { padding-right: 20px; padding-left: 20px; } div.full-width { margin-top: 20px; margin-left: 20px; margin-right: 20px; } } @media screen and (max-width: 1119px) { div.sharing { margin-left: 30px; max-width: 420px; } div.service-nav { display:none; } div.main-nav { display:none; } div.mobile-nav { display:block; } div.sm-icons { height: 32px !important; left:0; padding-left: 30px; padding-right: 30px; overflow:hidden; } div.footer-nav { bottom: 70px; left:0; padding-left: 30px; padding-right: 30px; } div.signet-oe-footer { display:none; } } @media screen and (max-width: 767px) { div.sharing { margin-top: 36px; margin-left: 20px; max-width: 280px; } div.mobile-nav { top: 20px; } div.sm-icons { padding-left: 20px; padding-right: 20px; } div.footer-nav { padding-left: 20px; padding-right: 20px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); } label.sharing { display:block; color: rgba(112,112,112,1); font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; } div.facebook-c { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQogIDxkZWZzPg0KICA8c3R5bGU+DQogICAgLnN0MHtmaWxsOiM0MTRjOTl9DQogICAgLnN0MXtmaWxsOiNmZmZ9DQogIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LDBBMTYsMTYsMCwxLDAsMzIsMTYsMTYsMTYsMCwwLDAsMTYsMFoiLz4NCiAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjY5LDI0LjloMy42NzlWMTZoMi40NTRsLjMyNS0zLjA2OEgxNy4zNjlsMC0xLjUzNmMwLS44LjA3Ni0xLjIyOSwxLjIyNC0xLjIyOWgxLjUzNFY3LjFIMTcuNjc2Yy0yLjk0OSwwLTMuOTg2LDEuNDg5LTMuOTg2LDMuOTkydjEuODQySDExLjg1MlYxNkgxMy42OXY4LjlaIi8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.instagram-b { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwMCA2MDAiIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj4NCiAgPGNpcmNsZSBjeD0iMzAwIiBjeT0iMzAwIiByPSIyOTcuNSIgZmlsbD0iIzMzMyIgLz4NCiAgPHBhdGggZD0iTTMwMCAxMjMuNWMtNDcuOSAwLTU0IC4yLTcyLjggMS4xLTE4LjguOS0zMS42IDMuOC00Mi44IDguMi0xMS42IDQuNS0yMS41IDEwLjUtMzEuMyAyMC40LTkuOCA5LjgtMTUuOCAxOS43LTIwLjQgMzEuMy00LjQgMTEuMi03LjQgMjQuMS04LjIgNDIuOC0uOCAxOC44LTEuMSAyNC44LTEuMSA3Mi44IDAgNDcuOS4yIDUzLjkgMS4xIDcyLjguOSAxOC44IDMuOCAzMS42IDguMiA0Mi44IDQuNSAxMS42IDEwLjUgMjEuNSAyMC40IDMxLjMgOS44IDkuOCAxOS43IDE1LjkgMzEuMyAyMC40IDExLjIgNC40IDI0LjEgNy4zIDQyLjggOC4yIDE4LjguOSAyNC44IDEuMSA3Mi44IDEuMSA0Ny45IDAgNTMuOS0uMiA3Mi44LTEuMSAxOC44LS45IDMxLjYtMy44IDQyLjktOC4yIDExLjYtNC41IDIxLjQtMTAuNiAzMS4yLTIwLjQgOS44LTkuOCAxNS44LTE5LjcgMjAuNC0zMS4zIDQuMy0xMS4yIDcuMy0yNCA4LjItNDIuOC44LTE4LjggMS4xLTI0LjggMS4xLTcyLjggMC00Ny45LS4yLTUzLjktMS4xLTcyLjgtLjktMTguOC0zLjktMzEuNi04LjItNDIuOC00LjUtMTEuNi0xMC42LTIxLjUtMjAuNC0zMS4zLTkuOC05LjgtMTkuNi0xNS44LTMxLjMtMjAuNC0xMS4zLTQuNC0yNC4xLTcuMy00Mi45LTguMi0xOC44LS45LTI0LjgtMS4xLTcyLjctMS4xem0tMTUuOCAzMS44SDMwMGM0Ny4xIDAgNTIuNy4yIDcxLjMgMSAxNy4yLjggMjYuNSAzLjcgMzIuOCA2LjEgOC4yIDMuMiAxNC4xIDcgMjAuMyAxMy4yIDYuMiA2LjIgMTAgMTIuMSAxMy4yIDIwLjMgMi40IDYuMiA1LjMgMTUuNiA2LjEgMzIuOC44IDE4LjYgMSAyNC4yIDEgNzEuMyAwIDQ3LjEtLjIgNTIuNy0xIDcxLjMtLjggMTcuMi0zLjcgMjYuNS02LjEgMzIuOC0zLjIgOC4yLTcgMTQuMS0xMy4yIDIwLjMtNi4yIDYuMi0xMiAxMC0yMC4zIDEzLjItNi4yIDIuNC0xNS42IDUuMy0zMi44IDYuMS0xOC42LjgtMjQuMiAxLTcxLjMgMS00Ny4xIDAtNTIuNy0uMi03MS4zLTEtMTcuMi0uOC0yNi41LTMuNy0zMi44LTYuMS04LjItMy4yLTE0LjEtNy0yMC4zLTEzLjItNi4yLTYuMi0xMC0xMi4xLTEzLjItMjAuMy0yLjQtNi4yLTUuMy0xNS42LTYuMS0zMi44LS44LTE4LjYtMS0yNC4yLTEtNzEuMyAwLTQ3LjEuMi01Mi43IDEtNzEuMy44LTE3LjIgMy43LTI2LjUgNi4xLTMyLjggMy4yLTguMiA3LTE0LjEgMTMuMi0yMC4zIDYuMi02LjIgMTIuMS0xMCAyMC4zLTEzLjIgNi4yLTIuNCAxNS42LTUuMyAzMi44LTYuMSAxNi4zLS44IDIyLjYtMSA1NS41LTF6bTExMCAyOS4zYy0xMS43IDAtMjEuMiA5LjUtMjEuMiAyMS4yczkuNSAyMS4yIDIxLjIgMjEuMiAyMS4yLTkuNSAyMS4yLTIxLjItOS41LTIxLjItMjEuMi0yMS4yek0zMDAgMjA5LjRjLTUwLjEgMC05MC42IDQwLjYtOTAuNiA5MC42IDAgNTAuMSA0MC42IDkwLjYgOTAuNiA5MC42IDUwLjEgMCA5MC42LTQwLjYgOTAuNi05MC42IDAtNTAuMS00MC41LTkwLjYtOTAuNi05MC42em0wIDMxLjhjMzIuNSAwIDU4LjggMjYuMyA1OC44IDU4LjhzLTI2LjMgNTguOC01OC44IDU4LjgtNTguOC0yNi4zLTU4LjgtNTguOCAyNi4zLTU4LjggNTguOC01OC44eiIgc3R5bGU9ImZpbGw6I2ZmZiIvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; margin-right: 25px; float:left; } div.twitter-c { background-image: url('../img/twitter-color.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.email-c { display:inline-block; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMSAzMSI+DQogIDxkZWZzPg0KICAgIDxzdHlsZT4NCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGZpbGw6ICNhNDE1MDY7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMiB7DQogICAgICAgIGZpbGw6ICNmZmY7DQogICAgICB9DQogICAgPC9zdHlsZT4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iR3J1cHBlXzEyODkiIGRhdGEtbmFtZT0iR3J1cHBlIDEyODkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzYuMDgyIC0zODU1KSI+DQogICAgPGNpcmNsZSBpZD0iRWxsaXBzZV84IiBkYXRhLW5hbWU9IkVsbGlwc2UgOCIgY2xhc3M9ImNscy0xIiBjeD0iMTUuNSIgY3k9IjE1LjUiIHI9IjE1LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzNi4wODIgMzg1NSkiLz4NCiAgICA8ZyBpZD0iY2xvc2UtZW52ZWxvcGVfMV8iIGRhdGEtbmFtZT0iY2xvc2UtZW52ZWxvcGUoMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0Mi44NTMgMzg2NC4yNjkpIj4NCiAgICAgIDxnIGlkPSJHcnVwcGVfMTkzIiBkYXRhLW5hbWU9IkdydXBwZSAxOTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPg0KICAgICAgICA8cGF0aCBpZD0iUGZhZF8xNCIgZGF0YS1uYW1lPSJQZmFkIDE0IiBjbGFzcz0iY2xzLTIiIGQ9Ik04Ljk5Miw5LjQ1Miw2Ljc0NCw3LjQ4NC4zMTYsMTIuOTk0YTEuMzE2LDEuMzE2LDAsMCwwLC45LjM1MkgxNi43NzJhMS4zMDYsMS4zMDYsMCwwLDAsLjg5My0uMzUybC02LjQyNC01LjUxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wOTQgLTAuMzY1KSIvPg0KICAgICAgICA8cGF0aCBpZD0iUGZhZF8xNSIgZGF0YS1uYW1lPSJQZmFkIDE1IiBjbGFzcz0iY2xzLTIiIGQ9Ik0xNy42NjgsMi4zNTJhMS4zMDcsMS4zMDcsMCwwLDAtLjktLjM1MkgxLjIxMmExLjMsMS4zLDAsMCwwLS44OTQuMzU0TDguOTkyLDkuNzg5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wOTUgLTIpIi8+DQogICAgICAgIDxwYXRoIGlkPSJQZmFkXzE2IiBkYXRhLW5hbWU9IlBmYWQgMTYiIGNsYXNzPSJjbHMtMiIgZD0iTTAsMi44NzhWMTMuNjYzTDYuMjc0LDguMzMxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMS43MzgpIi8+DQogICAgICAgIDxwYXRoIGlkPSJQZmFkXzE3IiBkYXRhLW5hbWU9IlBmYWQgMTciIGNsYXNzPSJjbHMtMiIgZD0iTTkuMTY3LDguMzMybDYuMjc0LDUuMzMxVjIuODc1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi43MzMgLTEuNzM5KSIvPg0KICAgICAgPC9nPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } img.logo { cursor:pointer; width: 150px; } div.logo-caption { font-size: 16px; line-height: 17px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); margin-top: 19px; max-width: 335px; } div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.search-icon-mm { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center 22px; background-repeat: no-repeat; background-size: 40px 40px; width: 83px; height: 82px; margin-top: -10px; display:inline-block; vertical-align:middle; } a.hamburger-icon { background-image: url('../img/hamburger-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; display:inline-block; float:right; } a.search-icon-mobile { background-image: url('../img/search-mobile.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 25%; float:right; } div.label-footer { position:absolute; right:0; padding-left: 45px; padding-right: 45px; top: 35px; color: var(--black); font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; font-family: 'Roboto'; font-style: normal; font-weight: 400; letter-spacing: 0.01rem; word-spacing: 0.025rem; } div.intro-footer { color: var(--black); font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; font-family: 'Roboto'; font-style: normal; font-weight: 400; letter-spacing: 0.01rem; word-spacing: 0.025rem; max-width: 340px; width:100%; } a.fb-ico { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQogIDxkZWZzPg0KICA8c3R5bGU+DQogICAgLnN0MHtmaWxsOiMzMzN9DQogICAgLnN0MXtmaWxsOiNmZmZ9DQogIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LDBBMTYsMTYsMCwxLDAsMzIsMTYsMTYsMTYsMCwwLDAsMTYsMFoiLz4NCiAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjY5LDI0LjloMy42NzlWMTZoMi40NTRsLjMyNS0zLjA2OEgxNy4zNjlsMC0xLjUzNmMwLS44LjA3Ni0xLjIyOSwxLjIyNC0xLjIyOWgxLjUzNFY3LjFIMTcuNjc2Yy0yLjk0OSwwLTMuOTg2LDEuNDg5LTMuOTg2LDMuOTkydjEuODQySDExLjg1MlYxNkgxMy42OXY4LjlaIi8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; display:inline-block; float:left; cursor:pointer; } a.tw-ico { background-image: url('../img/twitter-black-white.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; display:inline-block; float:left; } a.footer-menue.f1 { margin-left: 0px !important; } a.footer-menue.f3 { margin-right: 0; } img.logo-oe-footer { cursor:pointer; max-width: 110px; } div.logo-caption-footer { font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); margin-top: 12px; max-width: 210px; font-size: 12px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } p.copyright.cr-kbe { position:absolute; bottom: 29px; left:0; } div.footer-bg { border-top: 1px solid rgba(238,238,238,1); background-color: rgba(252,248,243,1); width: 100%; height: 320px; } div.instagram-c { display:inline-block; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwMCA2MDAiIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj4NCiAgPGNpcmNsZSBjeD0iMzAwIiBjeT0iMzAwIiByPSIyOTcuNSIgZmlsbD0iIzgxMzRBRiIgLz4NCiAgPHBhdGggZD0iTTMwMCAxMjMuNWMtNDcuOSAwLTU0IC4yLTcyLjggMS4xLTE4LjguOS0zMS42IDMuOC00Mi44IDguMi0xMS42IDQuNS0yMS41IDEwLjUtMzEuMyAyMC40LTkuOCA5LjgtMTUuOCAxOS43LTIwLjQgMzEuMy00LjQgMTEuMi03LjQgMjQuMS04LjIgNDIuOC0uOCAxOC44LTEuMSAyNC44LTEuMSA3Mi44IDAgNDcuOS4yIDUzLjkgMS4xIDcyLjguOSAxOC44IDMuOCAzMS42IDguMiA0Mi44IDQuNSAxMS42IDEwLjUgMjEuNSAyMC40IDMxLjMgOS44IDkuOCAxOS43IDE1LjkgMzEuMyAyMC40IDExLjIgNC40IDI0LjEgNy4zIDQyLjggOC4yIDE4LjguOSAyNC44IDEuMSA3Mi44IDEuMSA0Ny45IDAgNTMuOS0uMiA3Mi44LTEuMSAxOC44LS45IDMxLjYtMy44IDQyLjktOC4yIDExLjYtNC41IDIxLjQtMTAuNiAzMS4yLTIwLjQgOS44LTkuOCAxNS44LTE5LjcgMjAuNC0zMS4zIDQuMy0xMS4yIDcuMy0yNCA4LjItNDIuOC44LTE4LjggMS4xLTI0LjggMS4xLTcyLjggMC00Ny45LS4yLTUzLjktMS4xLTcyLjgtLjktMTguOC0zLjktMzEuNi04LjItNDIuOC00LjUtMTEuNi0xMC42LTIxLjUtMjAuNC0zMS4zLTkuOC05LjgtMTkuNi0xNS44LTMxLjMtMjAuNC0xMS4zLTQuNC0yNC4xLTcuMy00Mi45LTguMi0xOC44LS45LTI0LjgtMS4xLTcyLjctMS4xem0tMTUuOCAzMS44SDMwMGM0Ny4xIDAgNTIuNy4yIDcxLjMgMSAxNy4yLjggMjYuNSAzLjcgMzIuOCA2LjEgOC4yIDMuMiAxNC4xIDcgMjAuMyAxMy4yIDYuMiA2LjIgMTAgMTIuMSAxMy4yIDIwLjMgMi40IDYuMiA1LjMgMTUuNiA2LjEgMzIuOC44IDE4LjYgMSAyNC4yIDEgNzEuMyAwIDQ3LjEtLjIgNTIuNy0xIDcxLjMtLjggMTcuMi0zLjcgMjYuNS02LjEgMzIuOC0zLjIgOC4yLTcgMTQuMS0xMy4yIDIwLjMtNi4yIDYuMi0xMiAxMC0yMC4zIDEzLjItNi4yIDIuNC0xNS42IDUuMy0zMi44IDYuMS0xOC42LjgtMjQuMiAxLTcxLjMgMS00Ny4xIDAtNTIuNy0uMi03MS4zLTEtMTcuMi0uOC0yNi41LTMuNy0zMi44LTYuMS04LjItMy4yLTE0LjEtNy0yMC4zLTEzLjItNi4yLTYuMi0xMC0xMi4xLTEzLjItMjAuMy0yLjQtNi4yLTUuMy0xNS42LTYuMS0zMi44LS44LTE4LjYtMS0yNC4yLTEtNzEuMyAwLTQ3LjEuMi01Mi43IDEtNzEuMy44LTE3LjIgMy43LTI2LjUgNi4xLTMyLjggMy4yLTguMiA3LTE0LjEgMTMuMi0yMC4zIDYuMi02LjIgMTIuMS0xMCAyMC4zLTEzLjIgNi4yLTIuNCAxNS42LTUuMyAzMi44LTYuMSAxNi4zLS44IDIyLjYtMSA1NS41LTF6bTExMCAyOS4zYy0xMS43IDAtMjEuMiA5LjUtMjEuMiAyMS4yczkuNSAyMS4yIDIxLjIgMjEuMiAyMS4yLTkuNSAyMS4yLTIxLjItOS41LTIxLjItMjEuMi0yMS4yek0zMDAgMjA5LjRjLTUwLjEgMC05MC42IDQwLjYtOTAuNiA5MC42IDAgNTAuMSA0MC42IDkwLjYgOTAuNiA5MC42IDUwLjEgMCA5MC42LTQwLjYgOTAuNi05MC42IDAtNTAuMS00MC41LTkwLjYtOTAuNi05MC42em0wIDMxLjhjMzIuNSAwIDU4LjggMjYuMyA1OC44IDU4LjhzLTI2LjMgNTguOC01OC44IDU4LjgtNTguOC0yNi4zLTU4LjgtNTguOCAyNi4zLTU4LjggNTguOC01OC44eiIgc3R5bGU9ImZpbGw6I2ZmZiIvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.youtube-c { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA3MiA3MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCg0KPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCg0KPHBhdGggZD0iTTM2LDcyIEwzNiw3MiBDNTUuODgyMjUxLDcyIDcyLDU1Ljg4MjI1MSA3MiwzNiBMNzIsMzYgQzcyLDE2LjExNzc0OSA1NS44ODIyNTEsLTMuNjUyMzEwMjZlLTE1IDM2LDAgTDM2LDAgQzE2LjExNzc0OSwzLjY1MjMxMDI2ZS0xNSAtMi40MzQ4NzM1ZS0xNSwxNi4xMTc3NDkgMCwzNiBMMCwzNiBDMi40MzQ4NzM1ZS0xNSw1NS44ODIyNTEgMTYuMTE3NzQ5LDcyIDM2LDcyIFoiIGZpbGw9IiNGRjAwMDIiLz4NCg0KPHBhdGggZD0iTTMxLjA0NCw0Mi4yNjk5MTYgTDMxLjA0MjUsMjguNjg3NzQxNiBMNDQuMDExNSwzNS41MDIyNDM3IEwzMS4wNDQsNDIuMjY5OTE2IFogTTU5LjUyLDI2LjMzNDE2MjcgQzU5LjUyLDI2LjMzNDE2MjcgNTkuMDUwNSwyMy4wMDMxOTkgNTcuNjEyLDIxLjUzNjM2NjUgQzU1Ljc4NjUsMTkuNjEwMjk5IDUzLjc0MDUsMTkuNjAxMjM1MiA1Mi44MDMsMTkuNDg5NDQ3NyBDNDYuMDg2LDE5IDM2LjAxMDUsMTkgMzYuMDEwNSwxOSBMMzUuOTg5NSwxOSBDMzUuOTg5NSwxOSAyNS45MTQsMTkgMTkuMTk3LDE5LjQ4OTQ0NzcgQzE4LjI1OCwxOS42MDEyMzUyIDE2LjIxMzUsMTkuNjEwMjk5IDE0LjM4NjUsMjEuNTM2MzY2NSBDMTIuOTQ4LDIzLjAwMzE5OSAxMi40OCwyNi4zMzQxNjI3IDEyLjQ4LDI2LjMzNDE2MjcgQzEyLjQ4LDI2LjMzNDE2MjcgMTIsMzAuMjQ2NzIzMiAxMiwzNC4xNTc3NzMxIEwxMiwzNy44MjU2MDk4IEMxMiw0MS43MzgxNzAzIDEyLjQ4LDQ1LjY0OTIyMDIgMTIuNDgsNDUuNjQ5MjIwMiBDMTIuNDgsNDUuNjQ5MjIwMiAxMi45NDgsNDguOTgwMTgzOSAxNC4zODY1LDUwLjQ0NzAxNjUgQzE2LjIxMzUsNTIuMzczMDgzOSAxOC42MTIsNTIuMzEyNjU4MyAxOS42OCw1Mi41MTM1NzM2IEMyMy41Miw1Mi44ODUxOTEzIDM2LDUzIDM2LDUzIEMzNiw1MyA0Ni4wODYsNTIuOTg0ODkzNiA1Mi44MDMsNTIuNDk1NDQ1OSBDNTMuNzQwNSw1Mi4zODIxNDc4IDU1Ljc4NjUsNTIuMzczMDgzOSA1Ny42MTIsNTAuNDQ3MDE2NSBDNTkuMDUwNSw0OC45ODAxODM5IDU5LjUyLDQ1LjY0OTIyMDIgNTkuNTIsNDUuNjQ5MjIwMiBDNTkuNTIsNDUuNjQ5MjIwMiA2MCw0MS43MzgxNzAzIDYwLDM3LjgyNTYwOTggTDYwLDM0LjE1Nzc3MzEgQzYwLDMwLjI0NjcyMzIgNTkuNTIsMjYuMzM0MTYyNyA1OS41MiwyNi4zMzQxNjI3IEw1OS41MiwyNi4zMzQxNjI3IFoiIGZpbGw9IiNGRkYiLz4NCg0KPC9nPg0KDQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; display:inline-block; width: 32px; height: 32px; margin-right: 15px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } a.youtube-ico { background-image: url('../img/youtube.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; display:inline-block; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; float:left; } a.service-menue.red { color: var(--red); } div.sm-icons > a.fb-ico { margin-right: 0; } div.footer.oe > div.footer-bg { position: absolute; top: 0px; left: 0px; z-index: -1; } div.facebook-c:hover, div.facebook-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.instagram-b:hover, div.instagram-b:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.twitter-c:hover, div.twitter-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.email-c:hover, div.email-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.search-icon-mm:hover, a.search-icon-mm:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.hamburger-icon:hover, a.hamburger-icon:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.search-icon-mobile:hover, a.search-icon-mobile:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.fb-ico:hover, a.fb-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.tw-ico:hover, a.tw-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.instagram-c:hover, div.instagram-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.youtube-c:hover, div.youtube-c:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.youtube-ico:hover, a.youtube-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.main-menue.i1:after { display: block; content: ''; border: 1px solid #EA161F; border-radius: 3px; height: 2px; background-color: #EA161F; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } @media screen and (max-width: 1119px) { img.logo { width: 110px; } div.logo-caption { margin-top: 12px; max-width: 210px; font-size: 12px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } div.label-footer { padding-left: 30px; padding-right: 30px; left:0; } div.intro-footer { display:none; } img.logo-oe-footer { display:none; } h4.i7 { font-size: 24px; line-height: 28px; } div.footer-bg { height: 240px; } } @media screen and (max-width: 767px) { div.label-footer { padding-left: 20px; padding-right: 20px; } } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue { font-size: 24px; line-height: 28px; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue { text-decoration: none !important; } a.footer-menue { font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); display:inline-block; text-decoration:none; height: 18px; line-height: 1.5; margin: 0 calc(0.5vw + 30px) 0 0; } a.footer-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.footer-menue:hover::after, a.footer-menue:focus::after, a.footer-menue:active::after { transform: scaleX(1); } p { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; margin-bottom: 15px; margin-top: -2px; max-width: 800px; font-size: 16px; line-height: 26px; } @media screen and (max-width: 767px) { p { font-size: 15px; line-height: 24px; } } p.copyright { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.02rem; word-spacing: 0.05rem; color: var(--black); padding-left: 45px; padding-right: 45px; margin-bottom: 0; max-width: none; margin-top: 20px; margin-left: 0; width: auto; } @media screen and (max-width: 1119px) { p.copyright { padding-left: 30px; padding-right: 30px; } } @media screen and (max-width: 767px) { p.copyright { width:100%; padding-left: 20px; padding-right: 20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } h4 { margin: 0 0 12px -1px; max-width: 800px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); font-size: 24px; line-height: 28px; margin-left: -1px; } @media screen and (max-width: 1119px) { h4 { margin-left: 0px; } } @media screen and (max-width: 767px) { h4 { font-size: 21px; line-height: 25px; margin-left: 0px; } }
JS
Grid (Startpage)
Letzte Änderung: 29.05.2024 - 14:21 Uhr
×
Internetportal des Kantons Bern
Leichte Sprache
Kontakt
Startseite Kanton Bern
Jobs
BE-Login
DE
|
FR
|
EN
E-Services und Dienstleistungen
Themen
Über uns
One-Column (Full-Width)
Seite teilen: