/* -------- CSS Kreismenü + Trabantmenü ---------- */ /* KREISMENÜ AN- UND ABSCHALTEN (Anzeige im RS, Seitenklasse "Kreismenü anzeigen") */ #kreismenue{display:none;} body.kreismenue #kreismenue{display:block;} /* TRABANT AN- UND ABSCHALTEN */ /* Trabant aktiv auf Testseite (Seiten-id kontrollieren!) */ #trabant-gf, #trabant-kk{display:none;} body.mobil.navpos-99-7 #trabant-gf{display:block;} /*body.mobil.navpos-99-7 #trabant-kk{display:block;} */ body.mobil.navpos-99-7 #spacer-trabant{display:block;} body.mobil.navpos-99-7 #themenbild-bereich{position:absolute; top:5.5em; left:0; width:100%;} /* Trabant aktiv in spez. Navgruppen (Gruppen-id kontrollieren!) */ body.mobil.navpos-2-3 #trabant-gf, body.mobil.navpos-2-4 #trabant-kk, body.mobil.navpos-2-3 #spacer-trabant, body.mobil.navpos-2-4 #spacer-trabant{display:block;} body.mobil.navpos-2-3 #themenbild-bereich, body.mobil.navpos-2-4 #themenbild-bereich{position:absolute; top:5.5em; left:0; width:100%;} /* ########### START KREISMENÜ NEU ################## */ /*Kreismenü*/ #kreismenue, #lvl-schrink, #kreismenue .js-toggle div, #kreiskopftext{transition:all 0.6s;} #kreismenue{position:relative; height:35em; display:none;} #kreismenue .kreis-sub{display:block; position:absolute; top:0; left:0; width:100%; height:100%;} #kreismenue #lvl-btm{background-color:#011535;} #kreismenue #lvl-mid{z-index:200;} #kreismenue .lvl-top{position:absolute; z-index:300; background-image:url(img/bg-kreismenue3.png); background-size:auto 100%; background-position:50% 0; background-repeat:no-repeat; overflow:hidden;} #kreismenue .lvl-top .zentriert{width:64em; height:100%; margin:auto; position:relative; top:0;} #kreismenue .lvl-top a{color:#fff; text-decoration:none; text-transform:uppercase; cursor: pointer;} #kreismenue #lvl-schrink{z-index:400; background-color:rgba(44,87,121,0); pointer-events:none;} #kreismenue #lvl-mid{background-size:20em; background-position:50% 50%; background-repeat:no-repeat;} /*Center Images Circle Menu Desktop*/ #kreismenue.h0 #lvl-mid{background-image:url(img/img_circle/deaxo-weltkarte-kreisbild.jpg);} #kreismenue.g1 #lvl-mid{background-image:url(img/img_circle/g-deaxo-halbleiter.jpg);} #kreismenue.g2 #lvl-mid{background-image:url(img/img_circle/g-deaxo-chemische-industrie.jpg);} #kreismenue.g3 #lvl-mid{background-image:url(img/img_circle/g-deaxo-pharmaindustrie.jpg);} #kreismenue.g4 #lvl-mid{background-image:url(img/img_circle/g-deaxo-wasserstoff.jpg);} #kreismenue.k1 #lvl-mid{background-image:url(img/img_circle/k-deaxo-entwicklung-konstruktion.jpg);} #kreismenue.k2 #lvl-mid{background-image:url(img/img_circle/k-deaxo-projectmanagement.jpg);} #kreismenue.k3 #lvl-mid{background-image:url(img/img_circle/k-deaxo-projektbewertung.jpg);} #kreismenue.k4 #lvl-mid{background-image:url(img/img_circle/k-deaxo-turnkey.jpg);} /* kreismenü level top */ #kreismenue .lvl-top a{position:absolute; display:block; width:20.5em; z-index:1000; border-radius:1em;} #kreismenue .lvl-top a:hover{background-color:#3a6085; border-radius:2em;} #kreismenue .lvl-top a#ag0, #kreismenue .lvl-top a#ak0{width:14em; color:#8ae019; font-size:1.375em; font-weight:bold;} #kreismenue .lvl-top a#ag0:hover, #kreismenue .lvl-top a#ak0:hover{background-color:transparent; border-radius:0;} #kreismenue .lvl-top a.right:hover{background-color:#5F91B8;} #kreismenue .lvl-top a span{display:inline-block; float:right;} #kreismenue .lvl-top a.right span{float:left;} #kreismenue .lvl-top a span.txt{position:relative; padding:0.625em 0.5em 0.625em 0.75em; font-size:1em;} #kreismenue .lvl-top a span.img{width:2.25em; height:2.25em; margin:0.25em; border-radius:50%; background-size:2.25em 2.25em; background-position:50% 50%; background-repeat:no-repeat; overflow:hidden;} #kreismenue .lvl-top a:hover span.img{background-color:#fff;} /* kreismenü toggle*/ #kreismenue .js-toggle{display:block; width:2.75em; height:2.5em; position:absolute; right:0.5em; top:0; cursor:pointer;} #kreismenue .js-toggle div {display:block; width:100%; height:100%; background-image:url(img/arrow-submenue.png); background-size:1.25em 0.75em; background-position:center center; background-repeat:no-repeat;} #kreismenue .js-toggle div{-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} #kreismenue.hidden .js-toggle div{-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} #kreismenue.hidden{height:2.5em;} #kreismenue.hidden #lvl-schrink{background-color:rgba(44,87,121,1);} #kreiskopftext{position:absolute; top:0.5em; right:4em; width:20em; color:#fff; opacity:0;} #kreismenue.hidden #kreiskopftext{opacity:1;} #kreiskopftext span{font-style:italic;} /*Positions links circlemenu Desktop*/ #kreismenue #hh{top:4em; left:30.75em;} #kreismenue #ag0{top:4.875em; left:2.25em;} #kreismenue #ag1{top:10.875em; left:1.75em;} #kreismenue #ag2{top:14.625em; left:0.625em;} #kreismenue #ag3{top:18.625em; left:0.75em;} #kreismenue #ag4{top:22.5em; left:2.25em;} #kreismenue #ak0{top:4.875em; right:2.25em;} #kreismenue #ak1{top:10.875em; right:1.75em;} #kreismenue #ak2{top:14.625em; right:0.625em;} #kreismenue #ak3{top:18.625em; right:0.75em;} #kreismenue #ak4{top:22.5em; right:2.25em;} /*Icons Circle-menu Desktop*/ #kreismenue a#hh {width:2.5em;} #kreismenue a#hh span.img{width:2.5em; height:2.5em; margin:0; background-image:url(img/img_icons/global-white.png); background-size:2.5em;} #kreismenue a#hh:hover{background-color:transparent;} #kreismenue a#hh:hover span.img{background-image:url(img/img_icons/global-green.png); background-color:transparent;} #kreismenue a#ag1 span.img{background-image:url(img/img_icons/gf-halbleiter-white.png);} #kreismenue a#ag2 span.img{background-image:url(img/img_icons/gf-chemie-white.png);} #kreismenue a#ag3 span.img{background-image:url(img/img_icons/gf-pharma-white.png);} #kreismenue a#ag4 span.img{background-image:url(img/img_icons/gf-wasserstoff-white.png);} #kreismenue a#ag1:hover span.img{background-image:url(img/img_icons/gf-halbleiter-green.png);} #kreismenue a#ag2:hover span.img{background-image:url(img/img_icons/gf-chemie-green.png);} #kreismenue a#ag3:hover span.img{background-image:url(img/img_icons/gf-pharma-green.png);} #kreismenue a#ag4:hover span.img{background-image:url(img/img_icons/gf-wasserstoff-green.png);} #kreismenue a#ak1 span.img{background-image:url(img/img_icons/kk-entwicklung-white.png);} #kreismenue a#ak2 span.img{background-image:url(img/img_icons/kk-projektmanagement-white.png);} #kreismenue a#ak3 span.img{background-image:url(img/img_icons/kk-projektbewertung-white.png);} #kreismenue a#ak4 span.img{background-image:url(img/img_icons/kk-turnkey-white.png);} #kreismenue a#ak1:hover span.img{background-image:url(img/img_icons/kk-entwicklung-green.png);} #kreismenue a#ak2:hover span.img{background-image:url(img/img_icons/kk-projektmanagement-green.png);} #kreismenue a#ak3:hover span.img{background-image:url(img/img_icons/kk-projektbewertung-green.png);} #kreismenue a#ak4:hover span.img{background-image:url(img/img_icons/kk-turnkey-green.png);} /* ########### END KREISMENÜ NEU ################## */ /* ########### TRABANT NEU 2023 ################## */ #spacer-trabant{position:relative; height:5.25em; display:none;} .trabant{position:relative; height:19em; width:10em; margin:auto; background-image:url(img/deaxo-hexagon.png); background-size:7em; background-position:50% 5.625em; background-repeat:no-repeat; display:none;} .trabant li a {background-position:50%; background-size:3em; background-repeat:no-repeat;} #trabant-gf li#gfc1 a {background-image:url(img/img_icons/gf-halbleiter-blue.png);} #trabant-gf li#gfc2 a {background-image:url(img/img_icons/gf-chemie-blue.png);} #trabant-gf li#gfc3 a {background-image:url(img/img_icons/gf-pharma-blue.png);} #trabant-gf li#gfc4 a {background-image:url(img/img_icons/gf-wasserstoff-blue.png);} #trabant-gf li#gfc1.aktiv a {background-image:url(img/img_icons/gf-halbleiter-white.png);} #trabant-gf li#gfc2.aktiv a {background-image:url(img/img_icons/gf-chemie-white.png);} #trabant-gf li#gfc3.aktiv a {background-image:url(img/img_icons/gf-pharma-white.png);} #trabant-gf li#gfc4.aktiv a {background-image:url(img/img_icons/gf-wasserstoff-white.png);} #trabant-kk li#kkc1 a {background-image:url(img/img_icons/kk-entwicklung-blue.png);} #trabant-kk li#kkc2 a {background-image:url(img/img_icons/kk-projektmanagement-blue.png);} #trabant-kk li#kkc3 a {background-image:url(img/img_icons/kk-projektbewertung-blue.png);} #trabant-kk li#kkc4 a {background-image:url(img/img_icons/kk-turnkey-blue.png);} #trabant-kk li#kkc1.aktiv a {background-image:url(img/img_icons/kk-entwicklung-white.png);} #trabant-kk li#kkc2.aktiv a {background-image:url(img/img_icons/kk-projektmanagement-white.png);} #trabant-kk li#kkc3.aktiv a {background-image:url(img/img_icons/kk-projektbewertung-white.png);} #trabant-kk li#kkc4.aktiv a {background-image:url(img/img_icons/kk-turnkey-white.png);} #spacer-trabant{position:relative; height:5.25em; display:none;} .trabant{position:relative; height:19em; width:10em; margin:auto; background-image:url(img/deaxo-hexagon.png); background-size:7em; background-position:50% 5.625em; background-repeat:no-repeat; display:none;} .trabant li a {background-position:50%; background-size:3em; background-repeat:no-repeat;} .selector {position:relative; top:6em; width:112px; height: 112px; margin:auto;} /* width = trabant distance */ .selector ul {position: absolute; list-style: none; padding: 0; margin: 0; top: 7px; right: -20px; bottom: 11px; left: -18px;} .selector li {position:absolute; width:0; height:100%; margin:0 3.375em; -webkit-transform: rotate(-360deg); transition: all 0.8s ease-in-out;} .selector li input {display:none;} .selector button {position: relative; width: 100%; height: 100%; padding: 10px; border: 0; cursor: pointer; transition: all .1s; background:none;} .selector button:focus {outline:none;} .selector a {position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; line-height: 1px; margin-left: 0; background-color: #fff; border-radius: 50%; text-align: center; font-size: 1px; overflow: hidden; cursor: pointer; box-shadow: none; transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;} .selector li.aktiv a {background-color:#2a6494;} .selector li input:checked + label {background:#5cb85c; color:white;} .selector li input:checked + label:hover {background:#449d44;} .selector.open li input + label, .selector.open a { width:4em; height:4em; line-height:80px; margin-left:-2.1875em; font-size:14px; border:2px solid #ddd; background-color:#fafafa;} /* margin-left = rotation */ .selector li a{position:relative; display:block;} /* ########### END TRABANT NEU 2023 ################## */