@charset "utf-8"; @import url('/myboundcon/assets/css/lightcase/lightcase.css'); @import url('/myboundcon/assets/css/dropzone/dropzone.basic.css'); @import url('/myboundcon/assets/css/dropzone/dropzone.css'); @import url('/myboundcon/assets/fontawesome/css/fontawesome.css'); @import url('/myboundcon/assets/fontawesome/css/all.min.css'); /* Schriftarten */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url(/myboundcon/assets/fonts/Lato-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url(/myboundcon/assets/fonts/Lato-italic-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(/myboundcon/assets/fonts/Lato-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(/myboundcon/assets/fonts/Lato-normal-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Grundeinstellungen */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 400; background: #ffffff; } header { display: none; overflow: auto; } .searchmobile { display: none; } #mybc main { width: 100%; } #mybc content { display: flex; flex-direction: row; height: 100%; overflow: hidden; } #mybc register { width: 100%; padding: 1.500rem 2.000rem; } #mybc footer { width: 100%; } #mybc #workspace { margin-left: 240px; display: flex; flex-direction: column; width: 100%; padding: 1.500rem 2.000rem; } #mybc #language { display: flex; flex-direction: column; width: 100%; padding: 1.500rem 2.000rem; } /* Global */ #mybc h1 { font-size: 1.750rem; font-weight: 400; margin-bottom: 1.750rem; color: #b01774; } #mybc h2 { font-size: 1.500rem; font-weight: 400; margin-bottom: 1.500rem; color: #b01774; } #mybc h3 { font-size: 1.250rem; font-weight: 400; margin-bottom: 1.250rem; color: #b01774; padding-bottom: 0.500rem; border-bottom: 1px solid #9d2c79; width: 100%; } #mybc h4 { font-size: 1.000rem; font-weight: 400; margin-bottom: 1.250rem; color: #000000; padding-bottom: 0.500rem; border-bottom: 1px solid #000000; width: 100%; font-weight: 700;} #mybc h3 i { font-size: 24px; line-height: 1.250rem; } #mybc p { line-height: 1.5; margin-bottom: 1.000rem; } #mybc p > .color { color: #b01774; } #mybc .note { text-align: left; padding: 0.500rem 1rem; border: 1px solid #b01774; } #mybc p a { color: #b01774; text-decoration: underline; font-weight: 500; } #mybc p:last-child { margin-bottom: 0; } #mybc p a i { margin-right: 0.500rem; } /* #mybc p a:before { content: "\f044"; font-family: FontAwesome; color: #b01774; padding-right: 0.500rem;} */ #mybc p > span a { color: #b01774; text-decoration: underline; font-weight: 500; } #mybc p > span a:before { content: "\f044"; font-family: FontAwesome; color: #b01774; padding-right: 0.500rem;} #mybc .right { float: right; text-align: right !important; line-height: 1.250rem; padding: 0.300rem 0; } #mybc .right a { color: #9d2c79 !important; font-size: 1.250rem; } #mybc strong { font-weight: 700; color: #9d2c79; } #mybc .borderb { border-bottom: 1px solid #b01774; } #mybc #navdesk { width: 240px; height: 100%; border-right: 1px solid #000; padding: 0 1.500rem 1.500rem; position: fixed; } #mybc .databox { width: 50%; margin: 0 auto; } #mybc .regbox { width: 90%; max-width: 59em; margin: 0 auto; } #mybc .section { margin-bottom: 2.000rem; background: #f1f1f1; border: 1px solid #b01774; padding: 1.500rem; } #mybc .inner100 { width: 100%; } #mybc .inner100 img { width: 100%; display: block; outline: none; } #mybc .inner75 { width: 73%; } #mybc .inner66 { width: 65% } #mybc .inner50 { width: 48%; } #mybc .inner33 { width: 31% } #mybc .inner33 img { width: 100%; display: block; outline: none; } #mybc .inner25 { width: 23%; } #mybc .inner25 img { width: 100%; display: block; outline: none; } /* Abstände und Flexboxen */ #mybc .centered { margin: 0 auto 1.000rem; } #mybc .center { text-align: center; } #mybc .mb0 { margin-bottom: 0 !important; } #mybc .mb05 { margin-bottom: 0.500rem; } #mybc .mb10 { margin-bottom: 1.000rem; } #mybc .mb15 { margin-bottom: 1.500rem; } #mybc .flex { display: flex; flex-wrap: wrap; } #mybc .flexcc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #mybc .flexalign { display: flex; flex-wrap: wrap; align-content: center; } #mybc .flexstart { display: flex; flex-wrap: wrap; align-content: flex-start; } #mybc .flexspace { display: flex; flex-wrap: wrap; justify-content: space-between; } #mybc .flexaround { display: flex; flex-wrap: wrap; justify-content: space-around; } #mybc .flexend { display: flex; flex-wrap: wrap; justify-content: flex-end; } #mybc .flexspacetop { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } #mybc .flexcentered { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.000% } /* hr-klassen */ #mybc .trans { width: 100%; display: block; clear: both; border: none; } #mybc .trans10 { width: 100%; display: block; clear: both; margin-bottom: 1.000rem; border: none; } #mybc .trans15 { width: 100%; display: block; clear: both; margin-bottom: 1.500rem; border: none; } #mybc .transtb { width: 100%; display: block; clear: both; margin: 1.000rem 0; border: none; } #mybc .line { width: 100%; display: block; clear: both; border-top: 1px solid #b01774; border-right: none; border-bottom: none; border-left: none; } #mybc .linetb { width: 100%; display: block; clear: both; margin: 1.000rem 0; border-top: 1px solid #b01774; border-right: none; border-bottom: none; border-left: none; } /* Startseite */ #mybc #start { width: 100%; height: 100vh; max-width: 60em; margin: 0 auto; } #mybc .login { width: 350px; min-height: 300px; margin: 0 auto; border-radius: 5px; padding: 1.5rem; } #mybc .login img { width: 100%; outline: none; } /* Teamübersichten */ #mybc .thumbprofile { width: 23%; outline: none; text-decoration: none; outline: none; padding: 0.300rem; border: 1px solid #b01774; margin-bottom: 1.000rem; } #mybc .thumbprofile img { width: 100%; display: block; outline: none; margin-bottom: 0.500rem; } #mybc .profilename { width: 100%; text-align: center; padding: 0.500rem 0; display: block; } /* Ambiente Übersichten */ #mybc .thumbambiente { width: 32%; outline: none; text-decoration: none; outline: none; padding: 0.300rem; border: 1px solid #b01774; margin-bottom: 1.000rem; } #mybc .thumbambiente img { width: 100%; display: block; outline: none; margin-bottom: 0.500rem; } /* Tabellen für Summary */ .summary-table { width: 100%; border-collapse: collapse; border: none; } .summary-table td { width: 50%; padding: 0.500rem; border: none; } /* Erste Spalte linksbündig */ .summary-table td:first-child { text-align: left; } /* Zweite Spalte rechtsbündig */ .summary-table td:last-child { text-align: right; } /* Tabs */ #mybc .tab-container { width: 100%; padding: 0; } /* Versteckt die Radio-Buttons im Hintergrund */ #mybc .tab-input { display: none; } /* Leiste für die Tab-Reiter */ #mybc .tab-nav { display: flex; margin-bottom: 1.500rem; } /* Styling für die klickbaren Labels (Aktiv / Inaktiv) */ #mybc .tab-label { padding: 1.000rem; cursor: pointer; font-weight: bold; color: #666; transition: all 0.3s ease; border-bottom: 2px solid transparent; margin-bottom: -2px; /* Verhindert doppelte Linien */ } #mybc .tab-label:hover { color: #ffffff !important; background: #333333; } /* Versteckt standardmäßig alle Inhalte */ #mybc .tab-panel { display: none; color: #333333; } /* Wenn der Radio-Button für "Aktiv" ausgewählt ist */ #mybc #tab-aktiv:checked ~ .tab-nav label[for="tab-aktiv"] { color: #ffffff; background: #b01774; } #mybc #tab-aktiv:checked ~ .tab-content #content-aktiv { display: block; } /* Wenn der Radio-Button für "Inaktiv" ausgewählt ist */ #mybc #tab-inaktiv:checked ~ .tab-nav label[for="tab-inaktiv"] { color: #ffffff; background: #b01774; } #mybc #tab-inaktiv:checked ~ .tab-content #content-inaktiv { display: block; } /* Buttons */ #mybc a.btn { text-decoration: none; cursor: pointer; font-size: 1.000rem; text-align: center; padding: 0.500rem; border-color: transparent; display: block; } #mybc .btn { text-decoration: none; cursor: pointer; font-size: 1.000rem; text-align: center; padding: 0.500rem; border-color: transparent; display: block; } #mybc .btn i { margin-right: 0.500rem; } #mybc .btn100 { width: 100%; } #mybc .btn50 { width: 49%; } #mybc .btn33 { width: 32%; } #mybc .btn25 { width: 24%; } #mybc .btn10 { width: 9%; border-radius: 5px; text-align: center; } #mybc .btn10 i { margin: 0 !important; } #mybc a.btnm { width: 15%; margin: 0 2% 1rem 0; border: 1px solid #333; color: #333; } #mybc a.btnm:nth-child(6n){ margin-right: 0; } #mybc a.btnm:hover { border: 1px solid #333; background: #333; color: #fff;} #mybc a.btnq { width: 23%; margin: 0 2.666% 1rem 0; border: 1px solid #333; color: #333; } #mybc a.btnq:nth-child(4n){ margin-right: 0; } #mybc a.btnq:hover { border: 1px solid #333; background: #333; color: #fff;} #mybc .btntext { padding: 0.625rem; text-align: center; font-size: 0.750rem; display: block; cursor: pointer; color: #000; } /* Formulare */ #mybc form { width: 100%; } #mybc label { width: 100%; font-size: 0.936rem; font-style: italic; margin-bottom: 0.500rem; display: block; color: #b01774; } #mybc legend { font-weight: 700; color: #9d2c79; } #mybc .fb100 { width: 100%; } #mybc .fb100 img { width: 100%; display: block; outline: none; } #mybc .fb50 { width: 49%; } #mybc .fb30 { width: 32%; } /* anfang divs für eben hochgeladene medien */ #mybc .fbimgw { width: 300px; max-width: 90%; margin: 0 auto 1.500rem; } #mybc .fbimgw img { width: 100%; display: block; outline: none; } #mybc .fbimgh { width: 250px; margin: 0 auto 1.000rem; } #mybc .fbimgh img { width: 100%; display: block; outline: none; } #mybc .fbv { width: 600px; margin: 0 auto 1.000rem; } /* ende */ #mybc .input, #mybc .select, #mybc .textarea { background: #ffffff; color: #000000; font-size: 1.000rem; padding: 0.500rem; border: 1px solid #b01774; margin-bottom: 0.500rem; } #mybc .inputorange { background: #f69608; color: #000000; font-size: 1.000rem; padding: 0.500rem; border: 1px solid #b01774; margin-bottom: 0.500rem; } #mybc .gesperrt { background: #ff9999 !important; } #mybc .i100 { width: 100%; } #mybc .i90 { width: 89%; } #mybc .i50 { width: 48%; } #mybc .i10 { width: 9%; } #mybc .r100 { width: 100%; } #mybc .noninput { background: transparent; color: #000000; font-size: 1.000rem; padding: 0.500rem; border: 1px solid #b01774; margin-bottom: 0.500rem; } #mybc .noninput > .right { float: right; text-align: right !important; } #mybc .approve { text-align: center; color: #fff; cursor: pointer; border: none; text-decoration: none; display: block; } #mybc .approve:disabled { text-align: center; color: #999; cursor: default; border: none; text-decoration: none; display: block; background: #f1f1f1; } #mybc .s100 { width: 100%; } /* Captcha Felder & Co. */ #mybc .capic100, #mybc .cacode100 { width: 100%; text-align: center; border: 1px solid #b01774; } #mybc .capic50, #mybc .cacode50 { width: 49%; text-align: center; border: 1px solid #b01774; } #mybc .capic100, #mybc .capic50, #mybc .cacode100, #mybc .cacode50 { background: #ffffff; margin-bottom: 0.625rem; } #mybc .capic100, #mybc .capic50 { background: #f1f1f1; } #mybc .cacode100, #mybc .cacode50 { padding: 0.625rem; font-size: 1.000rem; background: #ffffff;} #mybc .submitjs { cursor: pointer; outline: none; border: none; border-radius: 5px; font-size: 1.000rem; } #mybc .submitjs:hover { background: #333333; color: #fff; } #mybc .submitcw { cursor: pointer; outline: none; border: none; border-radius: 5px; font-size: 1.000rem; } #mybc .submitcw:hover { background: #f69608; color: #fff; } #mybc .cancel { width: 100%; padding: 1.000rem 0 0 0; text-align: center; border-top: 1px solid #9d2c79; } #mybc .cancel a { color: #e14d28; text-decoration: none; } #mybc .listhead { width: 100%; border-bottom: 1px solid #b01774; padding: 0.500rem; } #mybc .listbox { width: 100%; border-bottom: 1px solid #b01774; padding: 0.500rem; } #mybc .listbox:last-child { border-bottom: none; } #mybc .listbox:hover { background: #ffffff; } #mybc .listboxdata { line-height: 2rem; font-size: 1.000rem; text-align: left; } #mybc .lbd1 { width: 25%; font-weight: 700; } #mybc .lbd1a { width: 40%; font-weight: 700; } #mybc .lbd1b { width: 10%; font-weight: 500; } #mybc .lbd1b a { text-decoration: none; color: #b01774 !important; } #mybc .lbd70 { width: 70%; font-weight: 700; } #mybc .lbdlong { width: 50%; font-weight: 700; } #mybc .lbd2 { width: 25%; } #mybc .lbd3 { width: 20%; } #mybc .lbd4 { width: 10%; } #mybc .lbd5 { width: 10%; } #mybc .lbd6 { width: 10%; text-align: right; } #mybc .lbd6 a { text-decoration: none; color: #b01774 !important; } #mybc .aktiv { color: #33cc00; } #mybc .waiting { color: #f69608; } #mybc .inaktiv { color: #ff3300; } /* #mybc .note { width: 100%; border: 1px solid #333; border-radius: 5px; background: #FFCD00; padding: 1.000rem; } */ @keyframes blinken { 0% { color: #b01774; opacity: 1; } 50% { color: #b01774; opacity: 0; } 100% { color: #b01774; opacity: 1; } } .blink { animation: blinken 1s infinite; font-weight: bold; } /* Galerie im acp */ #mybc .thumb { width: 23.500%; outline: none; margin-bottom: 1.000rem; } #mybc .thumb img { width: 100%; display: block; outline: none; } #mybc .thumbdel { width: 18%; border: 1px solid #b01774; display: block; padding: 0.500rem; margin-bottom: 1.000rem; } #mybc .chk { width: 100%; border-top: 1px solid #b01774; display: block; padding: 0.500rem 0 0; } #mybc .thumbdel img { width: 100%; display: block; outline: none; margin-bottom: 0.500rem; } /* Video im acp */ #mybc video#video { width: 100%; display: block; outline: none; max-height: 20rem; } /* Navigation */ .navcontainer { display: none; } #mybc #sidebar { width: 240px; height: 100%; float: left; position: fixed; overflow: visible; padding: 1.500rem; background: #f1f1f1; box-shadow: rgba(0,0,0,1) 0px 0px 15px; } #mybc .navlogo img { width: 100%; margin: 0 auto 1.500rem; display: block; outline: none; } #mybc ul.nav { list-style: none; } #mybc ul.nav > li a { list-style: none; line-height: 2.0; font-size: 1.000rem; color: #000; font-weight: 400; text-decoration: none; margin-left: 1.000rem; } #mybc ul.nav > li a:before{ content: "\f105"; font-family: FontAwesome; color: #000000; margin-left: -1.000rem; padding-right: 0.400rem; } #mybc ul.nav > li a:hover { color: #b01774; } /* Links/Banner */ #mybc .banner { width: 100%; max-width: 468px; padding: 0.500rem; border: 1px solid #000; margin: 0 auto 1.000rem; text-align: center; } #mybc .banner a { text-decoration: none; } #mybc .banner img { width: auto; max-width: 100%; display: block; outline: none; } #mybc .bannerdescr { font-size: 0.936rem; color: #000; } /* Farben */ #mybc .accent { background: #b01774; color: #ffffff; } #mybc .noaccent { border: 1px solid #b01774 !important; color: #000000 !important; } #mybc .light { background: #f1f1f1; } #mybc .alert { width: 100%; font-weight: normal; font-size: 1.000rem; padding: 0 0 0.500rem 0; margin-bottom: 1.000rem; display: block; text-align: center; } #mybc .alertsuccess { border: 1px solid #99cc66; } #mybc .alerterror { border: 1px solid #f69608; } #mybc .alert > .error { display: block; width: 100%; font-weight: 700; margin-bottom: 1rem; padding: 0.500rem 0; background: #f69608; color: #000; } #mybc .alert > .success { display: block; width: 100%; font-weight: 700; margin-bottom: 1rem; padding: 0.500rem 0; background: #99cc66; color: #000; } #mybc .alert > .notice { display: block; width: 100%; font-weight: 700; margin-bottom: 1rem; padding: 0.500rem 1rem; background: #f69608; color: #000; } #mybc .alert a { text-decoration: underline; color: #000000; } #mybc .alert a.btn { text-decoration: none; color: #ffffff; } #mybc .orange { background: #f69608; color: #000; } #mybc .blue { background: #99ccff; color: #000; } #mybc .red { background: #ff9999; color: #000; } #mybc .green { background: #99cc66; color: #000 !important; } /* Checkboxen für DSGVO */ /* The container */ .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 0.875rem; font-style: italic; color: #000; text-align: justify; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: #ffffff; border-radius: 5px; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #999999; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #b01774; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 6px; top: 4px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Radio Buttons Container */ .contradio { color: #000 !important; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 1.200rem;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .contradio input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom radio button */ .checkmarkR { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #ffffff; border-radius: 50%; } /* On mouse-over, add a grey background color */ .contradio:hover input ~ .checkmarkR { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .contradio input:checked ~ .checkmarkR {background-color: #b01774; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmarkR:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .contradio input:checked ~ .checkmarkR:after { display: block; } /* Style the indicator (dot/circle) */ .contradio .checkmarkR:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; } /* RANGE */ input[type=range] { -webkit-appearance: none; background: none!important; border: none!important; margin: 0!important; width: 100%; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; } /* Thumb */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: #e14d28; border: none; border-radius: 0; cursor: pointer; height: 1rem; margin-top: -0.5rem; width: 10%; } input[type=range]::-moz-range-thumb { border: none; border-radius: 0; height: 1rem; width: 10%; background: #e14d28; cursor: pointer; } input[type=range]::-ms-thumb { border: none; border-radius: 0; height: 1rem; width: 10%; background: #e14d28; cursor: pointer; } /* Track */ input[type=range]::-webkit-slider-runnable-track { background: #ffffff; border-radius: 0; cursor: pointer; height: 0.5rem; width: 100%; } input[type=range]::-moz-range-track { background: #ffffff; border-radius: 0; cursor: pointer; height: 0.5rem; width: 100%; } input[type=range]::-ms-track { background: #ffffff; border-color: transparent; color: transparent; cursor: pointer; width: 100%; } /* Datalist */ input[type=range] + datalist { display: flex; align-content: space-around; justify-content: space-around; } input[type=range] + datalist option { font-size: 1rem; } @media screen and (max-width: 1368px) { #mybc .databox { width: 75%; margin: 0 auto; } #mybc .btn25 { width: 48%; } #mybc .fb50 { width: 100%; } #mybc .thumbprofile { width: 31%; outline: none; text-decoration: none; outline: none; padding: 0.300rem; border: 1px solid #b01774; margin-bottom: 1.000rem; } #mybc .inner25 { width: 31%; } #mybc .inner75 { width: 68%; } } @media screen and (max-width: 1180px) { } @media screen and (max-width: 1025px) { /* NAVIGATION*/ #mybc #sidebar { display: none; } .navcontainer { width: 100%; border-bottom: 1px solid #333333; display: block; } .searchmobile { display: block; width: 100%; margin: 0 auto; } nav p { text-align: center; } .toggle, [id^=drop] { display: none; } nav { margin: 0 auto; width: 100%; padding: 0; } #logo { display: block; padding: 0 30px; float: left; font-size: 20px; line-height: 60px; } nav:after { content: ""; display: table; clear: both; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav { margin: 0; } .toggle + a, .menu { display: none; } .toggle { display: block; padding: 0 2.000rem; color: #ffffff; font-size: 1.000rem; font-weight:normal; line-height: 60px; text-decoration: none; border: none; } .toggle:hover { background-color: #b01774; color: #ffffff; } [id^=drop]:checked + ul { display: block; } nav a { font-weight: 400; display: block; padding: 0 2.00rem; color: #3C3C3B; font-size: 1.000rem; line-height: 60px; text-decoration: none; } nav ul li { display: block; width: 100%; color: #ffffff; border-top: 1px solid #ffffff; } nav ul li i { margin-right: 0.500rem; } nav ul li a { color: #ffffff; } nav ul li a:hover { background-color: #f1f1f1; color: #000000; } /* SEITE */ header { position: fixed; width: 100%; margin: 0 auto; display: block; background: #b01774; color: #ffffff; z-index: 99; overflow: auto; } #mybc .databox { width: 90%; margin: 0 auto; } #mybc #workspace { margin-left: 0; display: flex; flex-direction: column; width: 100%; padding: 1.500rem 2.000rem; } } @media screen and (max-width: 820px) { } @media screen and (max-width:520px) { }